Vue/Vuex/Axios，已计算属性，但没有 setter

Question

我被卡住了，我是 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>

Answer 1

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

computed setter vue documentation

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

Vue/Vuex/Axios，已计算属性，但没有 setter

Vue/Vuex/Axios, Computed property was assigned to but it has no setter

vue.js

vuex

getter-setter

Vue/Vuex/Axios，已计算 属性，但没有 setter

Vue/Vuex/Axios, Computed property was assigned to but it has no setter

vue.js

vuex

getter-setter

Vue/Vuex/Axios，已计算属性，但没有 setter