Vuex 모듈은 다른 Vuex 모듈을 감시할 수 있습니까?

Vuex 모듈은 다른 Vuex 모듈을 감시할 수 있습니까?

Vuex 모듈은 다른 모듈의 상태를 감시하고 결과적으로 액션을 트리거할 수 있습니까?

예를 들어 다음과 같은 경우를 생각해 보겠습니다.

store.js

import time from './store/time' ;
import position from './store/position' ;

const store = new Vuex.Store
(
    {
        modules:
        {
            time,
            position
        }    
    }
) ;

store/time.js

export default
{

    namespaced: true,

    state:
    {
        time: new Date()
    },

    getters:
    {
        time: (aState) => aState.time
    },

    mutations:
    {

        setTime (aState, aTime)
        {
            aState.time = aTime ;
        }

    }

} ;

store/position.js

export default
{

    namespaced: true,

    state:
    {
        positions: {}
    },

    getters:
    {
        positions: aState => aState.positions
    },

    mutations:
    {

        setPositions (aState, aPositionArray)
        {
            aState.positions = aPositionArray ;
        }

    },

    actions:
    {

        fetchPositionsAtTime ({ dispatch, commit, rootGetters }, { time })
        {
            // Fetch positions at given time from the server
            // commit('setPositions', ...)
        }

    }

} ;

트리거하는 위치.fetchPositionsAtTime시간 상태가 변경되면 바로 참조해 주세요.

도 할 수 요.setTime위치 모듈 동작을 트리거하기 위한 변환이지만, 반대 방향(즉, 감시)으로 가는 것이 더 우아하다고 생각합니다(많은 모듈이 시간이 필요할 수 있습니다).

사용하지 않고)Vue Component물론 그게 요점입니다)

★★★★★★★★★★★★★★를 사용할 수 있습니다.watch time하다.fetchPositionsAtTime의 time 변경 설명:

store.watch((state) => state.time.time, (val) => {
  store.dispatch('position/fetchPositionsAtTime', { time: val })
});

상태를 직접 보고 싶지 않은 경우 다음과 같이 getter를 볼 수도 있습니다.

store.watch((state, getters) => getters['time/time'], (val) => {
  store.dispatch('position/fetchPositionsAtTime', { time: val })
});

다음은 Vuex용 API 설명서에 대한 링크입니다.스토어 인스턴스

---

다음은 예를 제시하겠습니다.

const time = {
  namespaced: true,
  state: {
    time: new Date()
  },
  getters: {
    time: (aState) => aState.time
  },
  mutations: {
    setTime (aState, aTime) {
      aState.time = aTime ;
    }
  }
};

const position = {
  namespaced: true,
  state: {
    positions: {}
  },
  getters: {
    positions: aState => aState.positions
  },
  mutations: {
    setPositions (aState, aPositionArray) {
      aState.positions = aPositionArray ;
    }
  },
  actions: {
    fetchPositionsAtTime ({ dispatch, commit, rootGetters }, { time }) {
      let value = rootGetters['position/positions'].value || 0;
      commit('setPositions', { value: ++value });
    }
  }
};

const store = new Vuex.Store({
  modules: { time, position }    
});

store.watch((state) => state.time.time, (val) => {
  store.dispatch('position/fetchPositionsAtTime', { time: val })
});

new Vue({
  el: '#app',
  store,
  methods: {
    setTime() {
      this.$store.commit('time/setTime', new Date());
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  time: {{ $store.getters['time/time'] }}
  <br>
  position: {{ $store.getters['position/positions'] }}
  <br>
  <button @click="setTime">Change time</button>
</div>

언급URL : https://stackoverflow.com/questions/49947080/can-a-vuex-module-watch-another-vuex-module