输入字段上的 VueJS v3、Vuex 和 Composition API 和 v-model

Question

问题

我有一些代码可以从 Vuex 商店获取搜索查询。我正在使用计算属性来获取搜索查询，然后将其绑定到输入字段的 v-model。我希望能够通过输入字段 edit/change 搜索词，然后提交新的搜索查询，然后将执行新的搜索查询。

但是由于计算的属性是“只读”，当我在输入字段中更改搜索查询时，它不会更新搜索查询，并导致警告：

vendor.js:16674 Write operation failed: computed value is readonly

问题

如何从 Vuex 获取搜索查询，填充输入字段，change/update它，然后提交更改后的查询？我试图为作文 API 找到 computed setter，但找不到。

有什么想法吗？还是我应该看看另一种方法？

下面是代码

<template>

  <form role="search"
      aria-label="Sitewide"
      @submit.prevent="submitSearch"
      autocomplete="off">

    <input type="text" v-model="searchQuery" />
    <button type="button" v-on:click="submitSearch">Search</button>

  </form>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
   name: "ProductSearchBox",
   setup() {
      const store = useStore();
      const searchQuery = computed(() => store.getters["search/getFiltersSearchTerm"]);

      const submitSearch = () => {
        store.dispatch('search/performSearch', searchQuery);
      }

      return {
          searchQuery,
          submitSearch
      }
   }
}
</script>

Answer 1

这听起来更像是 watch.

的用例

const searchQuery = ref('');
watch(
  () => store.getters["search/getFiltersSearchTerm"],
  (term) => searchQuery.value = term
);

Answer 2

您可以像这样对 v-model 使用计算的属性：

<template>
    <form role="search"
        aria-label="Sitewide"
        @submit.prevent="submitSearch"
        autocomplete="off">

        <input type="text" v-model="searchQuery" />

    </form>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
   name: "ProductSearchBox",
   setup() {
      const store = useStore();
      const searchQuery = computed({
         get: () => store.getters['search/getFiltersSearchTerm'],
         set: (newValue) => store.commit('search/yourMutation', newValue)
      });
      
      const submitSearch = () => {
        store.dispatch('search/performSearch', searchQuery);
      }

      return {
          searchQuery,
          submitSearch
      }
   }
}
</script>

输入字段上的 VueJS v3、Vuex 和 Composition API 和 v-model

VueJS v3, Vuex and Composition API and v-model on input field

vue.js

vuex

vuejs3

vuex4