Vue中计算属性eleron无setter却被赋值的问题及解决方法

这问题我在项目里碰过好多次了，你遇到的Computed property "eleron" was assigned to but it has no setter报错，本质是用mapGetters生成的计算属性默认只有getter，是只读的，Vue不允许直接给只读计算属性赋值。下面给你几个实用的解决办法：

方案一：给计算属性手动添加setter（符合Vuex规范） #

既然要修改Vuex里的状态，就得通过mutation来操作，所以我们可以给映射的计算属性手动加一个setter，在setter里触发对应的mutation：

computed: {
  eleron: {
    // getter还是用Vuex的getter
    get() {
      return this.$store.getters['promoter/eleron']
    },
    // setter里提交mutation修改state
    set(newValue) {
      // 这里替换成你实际定义的mutation名称，比如'promoter/SET_ELERON'
      this.$store.commit('promoter/SET_ELERON', newValue)
    }
  }
}

这样你在getInfo里执行this.eleron = response.data时，就会触发setter，通过mutation合法地修改Vuex的状态，不会再报错。

方案二：直接调用mutation/action修改状态（更直接） #

其实没必要绕计算属性的setter，既然是修改Vuex的状态，直接在请求成功后提交mutation或者分发action更清晰，也符合Vuex的设计原则：

getInfo() {
  this.loading = true;
  axios.post('/srt', { search: this.search })
  .then((response) => {
    // 直接提交mutation修改state
    this.$store.commit('promoter/SET_ELERON', response.data);
    console.log(response.data);
    this.loading = false;
  });
}

这种方式代码更直观，也避免了额外的计算属性setter逻辑，我个人更推荐这种写法。

方案三：如果状态不需要共享，改成组件内部data #

如果eleron只是当前组件用到的状态，不需要在其他组件共享，那完全没必要放到Vuex里，直接改成组件的data属性就行：

data() {
  return {
    eleron: null,
    loading: false,
    search: ''
  }
},
methods: {
  getInfo() {
    this.loading = true;
    axios.post('/srt', { search: this.search })
    .then((response) => {
      this.eleron = response.data;
      console.log(response.data);
      this.loading = false;
    });
  }
}

这种写法最简单，适合状态只在当前组件使用的场景。

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