如何为Vuex命名空间模块的状态创建Getter和Setter并在组件中使用？

这个问题我之前也碰到过，其实核心原因就是你用mapState和mapGetters生成的计算属性只有getter，没有setter，而v-model在修改值的时候会调用setter，找不到就会抛出那个警告。下面给你几种实用的解决办法：

方法1：手动编写带get/set的计算属性（直接操作store） #

你可以放弃mapState/mapGetters，自己写完整的计算属性，getter负责从命名空间模块取状态，setter负责触发对应的mutation修改状态：

new Vue({
  computed: {
    a: {
      // 获取命名空间模块的state值
      get() {
        return this.$store.state.nameSpacedModA.a;
      },
      // 修改时触发对应的mutation
      set(newValue) {
        this.$store.commit('nameSpacedModA/updateA', newValue);
      }
    },
    // 如果用getter的话，get部分改成这样
    b: {
      get() {
        return this.$store.getters['nameSpacedModA/b'];
      },
      set(newValue) {
        this.$store.commit('nameSpacedModA/updateB', newValue);
      }
    }
  }
})

别忘了在你的命名空间模块里定义对应的mutation：

// nameSpacedModA模块代码
export default {
  namespaced: true,
  state: {
    a: '',
    b: ''
  },
  mutations: {
    updateA(state, newValue) {
      state.a = newValue;
    },
    updateB(state, newValue) {
      state.b = newValue;
    }
  },
  getters: {
    b: state => state.b // 示例getter
  }
}

方法2：结合mapMutations简化代码 #

如果不想每次都写this.$store.commit，可以用mapMutations把mutation映射到组件方法里，然后在setter里调用：

import { mapMutations } from 'vuex';

new Vue({
  computed: {
    a: {
      get() {
        return this.$store.state.nameSpacedModA.a;
      },
      set(newValue) {
        // 直接调用映射后的mutation方法
        this.updateA(newValue);
      }
    }
  },
  methods: {
    // 映射命名空间模块的mutation
    ...mapMutations('nameSpacedModA', ['updateA'])
  }
})

关键注意点 #

• 永远不要直接修改Vuex的state（比如this.$store.state.nameSpacedModA.a = newValue），必须通过mutation修改，这是Vuex的核心规范，能保证状态变更可追踪。
• 如果你的getter有复杂逻辑（比如过滤、计算），那get部分就取getter的值，而不是直接取state，这样能复用getter的逻辑。

内容的提问来源于stack exchange，提问作者Anand Moghe