vue-cli3 报Computed property “xxx” was assigned to but it has no setter.

这种问题一般是area这个计算属性没有设置set方法导致该报错，

因为在methods方法里面有对area赋值的操作。只要添加一个 set方法就可以解决此报错。

v-model会视图直接修改vuex中的state中的searchWebName，在严格模式下，由于这个修改不是在mutation函数中执行的，所以这里就会抛出一个错误.

方法一：

监听值变化，调用mutations中方法修改数据

<template>
<input :value="message" @input="updateMessage">
</template>
<script>
import{mapGetters} from "vuex";
export default{
    computed: {
      ...mapState({
        message: state => state.obj.message
      })
    },
    methods: {
        updateMessage (e) {
        this.$store.commit('updateMessage', e.target.value)
      }
    }
}
</script>
 
// ...
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

方法二

计算属性：使用带有Setter的双向绑定计算属性

<!--vue-->
<template>
    <el-form class="searchDiv">
        <el-form-item label="网站名称：">
              <input class="inputC" v-model="searchWebName" placeholder="网站名称" />
         </el-form-item>
    </el-form>
</template>
 
<script>
import { mapGetters, mapActions } from "vuex";
export default {
    computed: {
        ...mapGetters(["listProject"]),
        searchWebName: {
          get() {
                return this.$store.state.searchWebName;
          },
          set(value) {
                this.$store.commit("SET_WENNAME", value);
          }
        },
    }
 
}
 
</script>
<!--vuex-->
export default new Vuex.Store({
    state: {
        listProject:[],
        searchWebName: '',
    },
    mutations: {
        SET_PROJECT_LIST: (state, {
            projectlist
        }) => {
            state.listProject= projectlist
        },
        SET_WENNAME(state, val) {
            state.searchWebName = val
        },
    },
    getters: {
        listProject: state => {
            return state.listProject;
        },
    }
 
})

方法三

使用mapMutations引入方法

  computed: {
    showBattleConfirm: {
      get() {
        return this.$store.state.showBattleConfirm;
      },
      set() {}
    }
  },
 methods: {
    ...mapMutations(["setBattleConfirm"]),
 }

//vuex
  mutations: {
    setBattleConfirm:(state,data) =>{
      state.showBattleConfirm = data
    },
  },

扫描二维码关注公众号，回复： 11277920 查看本文章