Question

我在Vuex模块中有一个吸气剂。我使用mutator更改了值，并且state属性发生了变化，但getter属性仍然相同，它没有反应。

然后，当我尝试将吸气剂移至Vuex主商店时，它是被动的并且可以工作。我不知道为什么模块不响应？

这是Vuex商店：

import {mymodule} from './vuex-modules' 
  
export default new Vuex.Store({ 
    modules: {  mymodule }, 
    getters: {},
    mutations: {
        updateState(state, payload) { 
            this.state[payload.stateName] = payload.newValue;
        },
    }, 
})

和模块：

export const mymodule = { 
    state: {  
        myproperty: ['defaultvalue']              //<-- the property is in the module's state
    },
    getters: {  
        myproperty: state => state.myproperty      //<-- getting myproperty from local state
    }, 
}

在组件中，我具有带有mapGetters的计算属性：

computed: {
      ...mapGetters({ 
         myproperty: 'myproperty'
    }),

我从组件中进行了提交（在变体中调用updateState）

 let object = { stateName: 'myproperty', newValue:'newelement' }  
 this.$store.commit('updateState', object);

Vuex状态改变，但计算出的属性不变。

我可以简单地将吸气剂从模块移到Vuex存储中：

export default new Vuex.Store({

    modules: { mymodule }, 
    getters: {
        myproperty: state => state.myproperty
    },

现在它可以工作了，计算的属性myproperty改为具有'newelement'。可能是什么问题？

更新

所以我不能在突变内使用this.state[payload.stateName]，我必须指定它所在的模块。但是，如何使它动态化呢？我认为这就像是混合在一起的mixin。

是否有一种方法可以在mutator中定位状态属性而不必指定其可能位于的模块中？

否则，我将无法拥有主要状态和模块都通用的增变器。

Answer 1

我现在了解到，增变器没有访问模块的属性，而只是访问了自己的状态属性。因此，它在目标属性位于模块内部时向主状态添加了一个新属性。

所以这个：

mutations: {
 updateState(state, payload) {
            
      state[payload.stateName] = payload.newValue;
 },

应该是：

state.mymodule[payload.stateName] = payload.newValue;

所以这就是为什么发生这种情况。但是我需要对问题进行编辑。

Vuex吸气剂在模块内部时不起作用

1 个答案: