Vue报错：Computed property 'username'被赋值但无setter的解决方法

这个报错我太熟了！本质是你尝试给一个只有 getter 的计算属性赋值，但Vue要求如果要对计算属性进行赋值操作，必须给它定义对应的 setter。咱们一步步来解决：

情况1：不需要修改username，仅用于展示 #

先检查你的代码中是否不小心对username进行了赋值操作：

• 模板里如果用了v-model="username"，改成v-bind:value="username"（或者直接用{{ username }}插值展示）
• 脚本里如果有this.username = 'xxx'这类直接赋值的语句，删掉它

这样就能避免触发对计算属性的赋值操作，报错自然就消失了。

情况2：需要修改username #

如果确实需要修改这个值，得按照Vuex的规范来操作，同时给计算属性补上setter：

第一步：在Vuex的mutations中添加修改方法 #

Vuex要求所有状态修改必须通过mutations完成，不能直接修改state，所以先补上对应的mutation：

// 你的store文件中的mutations部分
mutations: {
  set_username(state, newUsername) {
    state.user_data.username = newUsername;
  }
}

第二步：给计算属性添加setter #

修改你的computed代码，在setter中调用刚才定义的mutation：

username: {
  get() {
    return this.$store.state.user_data.username;
  },
  set(newValue) {
    // 通过commit触发mutation修改状态
    this.$store.commit('set_username', newValue);
  }
}

现在你再通过v-model="username"或者this.username = '新用户名'赋值时，就会触发setter，合法地修改Vuex中的状态，同时不会再出现报错。

小提示 #

如果项目中频繁使用Vuex状态，可以用mapState或mapGetters来简化代码，但核心逻辑不变——修改状态必须通过mutations。

内容的提问来源于stack exchange，提问作者sof-03