vue.js - 如何通过 Vuex 和组合 API 在 Vue 中使用 v-model？

Question

<template>
    <div>
        <h1>{{ counter }}</h1>
        <input type="text" v-model="counter" />
    </div>
</template>

<script>
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    export default {
        setup() {
            const store = useStore()
            const counter = computed(() => store.state.counter)
            return { counter }
        },
    }
</script>

如何在输入值改变时改变商店中计数器的值

我在控制台中收到此错误:

[ operation failed: computed value is readonly ]

Answer 1

试试这个:

...
const counter = computed({
  get: () => store.state.counter,
  set: (val) => store.commit('COUNTER_MUTATION', val)
})
...

https://v3.vuejs.org/api/computed-watch-api.html#computed