Vuex中如何在输入时通过Mutation更新状态？

嘿，我来帮你搞定这个问题！你遇到的报错核心原因是：v-model的双向绑定会直接修改你从getter拿到的userdata对象，但这个对象是Vuex state里的引用，直接修改就绕过了mutation，违反了Vuex的状态管理规则。下面给你两种靠谱的解决方案，最推荐第一种：

方法一：使用带get/set的计算属性（实时更新） #

这是Vue官方推荐的方式，既能保留v-model的便利，又能通过mutation更新state。

步骤1：修改计算属性 #

不要直接用mapGetters绑定整个userdata，而是针对需要修改的字段（比如username）写带get和set的计算属性：

computed: {
  // 如果需要多个字段，就给每个字段都写对应的get/set
  username: {
    // 从Vuex getter获取当前值
    get() {
      return this.$store.getters.getUserData.username;
    },
    // 当输入框内容变化时，触发set方法提交mutation
    set(newUsername) {
      // 注意：要把原来的userdata属性都保留，只更新username
      const updatedUser = {
        ...this.$store.getters.getUserData,
        username: newUsername
      };
      // 提交mutation更新state
      this.$store.commit(types.UPDATEUSERDATA, updatedUser);
    }
  }
}

步骤2：修改模板绑定 #

把v-model从userdata.username改成我们定义的计算属性username：

<md-input v-if="edit===false" disabled v-model="username"></md-input>

这样每次输入框内容变化时，都会自动触发set方法，通过mutation更新Vuex的state，完全符合规则，不会再报错啦！

方法二：维护本地副本（批量更新） #

如果你不需要实时更新state，而是想在表单提交时再批量更新，可以在组件里维护一个本地的用户数据副本：

步骤1：在data里定义本地副本 #

data() {
  return {
    localUser: {}
  };
},
created() {
  // 组件创建时，把Vuex里的userdata复制到本地（用展开运算符做浅拷贝）
  this.localUser = {...this.$store.getters.getUserData};
}

步骤2：模板绑定本地副本 #

<md-input v-if="edit===false" disabled v-model="localUser.username"></md-input>

步骤3：提交mutation更新state #

比如在表单提交按钮的点击事件里，把本地副本提交给mutation：

methods: {
  saveUser() {
    this.$store.commit(types.UPDATEUSERDATA, this.localUser);
  }
}

小提醒：区分mutation和getter #

你提到的[types.GETUSERDATA]其实不应该是mutation哦！mutation的职责是修改state，不能返回数据；而获取state数据应该用getter。正确的写法应该是：

// 在getters.js中定义获取数据的getter
export default {
  getUserData: state => state.currentUser
};

mutation只保留UPDATEUSERDATA就够啦，它负责修改state.currentUser的值。

内容的提问来源于stack exchange，提问作者Andres Felipe