Vue.js Vuex模块是否可以监视另一个Vuex模块？

Vuex模块能否监视其他模块的状态，并触发相应的操作

例如，让我们考虑下面的情况：

store.js

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

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

export default
{

    namespaced: true,

    state:
    {
        time: new Date()
    },

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

    mutations:
    {

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

    }

} ;

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', ...)
        }

    }

} ;

store/time.js

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

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

export default
{

    namespaced: true,

    state:
    {
        time: new Date()
    },

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

    mutations:
    {

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

    }

} ;

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', ...)
        }

    }

} ;

store/position.js

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

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

export default
{

    namespaced: true,

    state:
    {
        time: new Date()
    },

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

    mutations:
    {

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

    }

} ;

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组件

当然，这是关键）

您可以使用存储实例的

watch

方法来监视

时间

状态，然后在

时间

值更改时调度

fetchPositionsAtTime

操作：

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 })
});

---

下面是一个例子：

const time={
名称空间：对，
声明：{
时间：新日期（）
},
吸气剂：{
时间：（aState）=>aState.time
},
突变：{
设置时间（aState、aTime）{
aState.time=aTime；
}
}
};
常数位置={
名称空间：对，
声明：{
职位：{}
},
吸气剂：{
位置：aState=>aState.positions
},
突变：{
设置位置（aState、aPositionArray）{
aState.positions=位置阵列；
}
},
行动：{
fetchPositionsAtTime（{dispatch，commit，rootGetters}，{time}）{
让value=rootGetters['position/positions'].value | | 0；
提交（'setPositions'，{value:++value}）；
}
}
};
const store=新的Vuex.store({
模块：{时间，位置}
});
store.watch（（state）=>state.time.time，（val）=>{
dispatch（'position/fetchPositionsAtTime'，{time:val}）
});
新Vue({
el:“#应用程序”，
商店，
方法：{
设定时间（）{
此.store.commit（'time/setTime'，new Date（））；
}
}
})

时间：{{$store.getters['time/time']}


位置：{{$store.getters['position/positions']}


换乘时间

这确实是一个非常酷的解决方案，谢谢！这是否也适用于观看一个有成就的人而不是直接观看国家？谢谢！在我的例子中，要使用getters，我必须执行store.watch（（）=>store.getters['time/time']，…），因为Typescript不允许我使用（state，getters）作为函数参数。。。