Vue3+Vuex+Composition API中input绑定v-model出现computed只读报错如何解决

默认传入getter函数创建的computed为只读属性，而v-model双向绑定会尝试写入该属性，因此触发只读警告。可选择以下两种方案实现需求：

方案1：使用可写computed（输入需实时同步到Vuex时选择） #

Composition API的computed支持传入包含get和set方法的对象创建可写计算属性，在set方法内调用Vuex的mutation更新store内的搜索词即可：

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

export default {
  name: "ProductSearchBox",
  setup() {
    const store = useStore();
    const searchQuery = computed({
      get() {
        return store.getters["search/getFiltersSearchTerm"];
      },
      set(newVal) {
        // 需提前在vuex的search模块定义名为setFiltersSearchTerm的mutation
        store.commit("search/setFiltersSearchTerm", newVal);
      }
    });

    const submitSearch = () => {
      // 注意computed取值需要访问.value属性
      store.dispatch('search/performSearch', searchQuery.value);
    }

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

该方案会将输入的每一步都实时同步到Vuex，适合需要跨组件共享输入状态的场景。

方案2：本地ref托管输入（普通搜索场景更推荐） #

如果不需要实时同步输入内容到Vuex，仅需初始值从Vuex获取、提交时才处理输入内容，直接用本地ref托管输入即可，逻辑更轻量：

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

export default {
  name: "ProductSearchBox",
  setup() {
    const store = useStore();
    // 初始值从Vuex读取，后续输入更新均存在本地ref
    const searchQuery = ref(store.getters["search/getFiltersSearchTerm"]);

    const submitSearch = () => {
      store.dispatch('search/performSearch', searchQuery.value);
      // 若提交后需要同步最新搜索词到Vuex，可补充调用mutation
      // store.commit("search/setFiltersSearchTerm", searchQuery.value);
    }

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

该方案避免了和Vuex的频繁交互，是大多数搜索框场景的最优选择。

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