Vuex getter 在模块内部时没有反应

Posted 2023-02-22

【中文标题】Vuex getter 在模块内部时没有反应

【英文标题】：Vuex getter not reactive when inside module

【发布时间】：2020-11-28 03:55:48

【问题描述】：

我在 Vuex 模块中有一个吸气剂。我用 mutator 改变了值，state 属性也改变了，但是 getter 属性还是一样的，它没有反应。

然后，当我尝试将 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 状态发生变化，但计算属性不变。

我可以简单地将模块中的 getter 移动到 Vuex 存储中：

export default new Vuex.Store(

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

现在它可以工作了，计算属性 myproperty 改为具有“新元素”。 可能是什么问题？

更新

所以我不能在突变中使用this.state[payload.stateName]，我必须指定它所在的模块。但是我怎样才能让它动态呢？ 我认为它就像混合在一起的混合。

有没有一种方法可以在 mutator 中定位状态属性，而不必指定它可能所在的模块？

否则我无法拥有一个对主状态和模块都通用的 mutator。

【参考方案1】：

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

所以这个：

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

应该是：

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

所以我猜这就是它发生的原因。但我有一些东西要添加到问题的编辑中。