Vue/Vuex/Axios，已分配计算属性，但没有设置器答案

【问题标题】：Vue/Vuex/Axios, Computed property was assigned to but it has no setterVue/Vuex/Axios，已分配计算属性，但没有设置器
【发布时间】：2021-03-17 19:02:09
【问题描述】：

我被卡住了，我是 vue 和 vuex 的新手，当我运行下面的代码时，我遇到了这个错误。我已经在这里搜索了其他一些问题，但我找不到解决方案

[Vue warn]: Computed property "vat" was assigned to but it has no setter.

found in

---> <BusinessList>
       <App> at src/App.vue
         <Root>

有人可以帮我吗？

-> 下面是带有代码的文件

BusinessList.vue

<script>
// import BusinessDataService from "../services/BusinessDataService";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "BusinessList",
  methods: {
    ...mapActions(["fetchBusinesses", "searchBusiness"])
  },
  computed: mapGetters(["allBusinesses", "vat"]),
  created(){
    this.fetchBusinesses();
  },
  mounted() {
    this.searchBusiness(this.vat);
  }
};
</script>

<template>
<!-- SEARCH FORM -->
                <div class="input-group input-group-md">
                    <input
                    class="form-control form-control-navbar"
                    type="search"
                    placeholder="Search by Vat"
                    aria-label="Search"
                    v-model="vat"
                    />
                    <div class="input-group-append">
                    <button class="btn btn-outline-danger" 
                    type="submit"
                    @click="searchBusiness"
                    >
                        <i class="fas fa-search"></i>
                    </button>
                    </div>
                </div>
</template>

【问题讨论】：

这是因为vat 是来自您的商店的计算属性，但您已将其分配为v-model 属性，它将尝试写入该值。相反，将本地值保存为 v-model 并在该值更改时更新存储，以便您进行正确的双向通信。

标签： vue.js vuex getter-setter

【解决方案1】：

在 vue 中，computed 默认设置为 getter，这意味着如果你想为一个 computed 设置一个值，你应该在该 computed 中定义一个 setter。这是阅读有关此主题的更多信息的 vue 文档：

computed setter vue documentation

现在您已经从 vuex 存储中设置了计算的 'vat' 并将其用作模板中的 v-model。这意味着每当输入数据发生变化时，vue 都会尝试为没有设置器的计算值分配一个值，因此您会收到此错误。您应该将v-model 设置为data 中的一个变量，并重构您的代码以反映此更改。

【讨论】：