如何在Vue中使用v-model与Vuex和composition API?

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>

当输入值发生变化时如何改变店内计数器的值

我在控制台得到这个错误:

[操作失败:计算值为只读]

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计算

Answer 2

试试这个:

<input v-model="counter">
computed: {
counter: {
get () {
return this.$store.state.a
},
set (value) {
this.$store.commit('updateA', value)
}
}
}

Answer 3

使用复合API

创建计算属性时，可以有两种类型，只读和可写。

为了允许v-model更新变量值，我们需要一个可写的计算ref。

只读计算示例裁判:

const 
n = ref(0),
count = computed(() => n.value);
console.log(count.value) // 0  
count.value = 2 // error

可写计算示例裁判:

const n = ref(0)

const count = computed({
get: () => n.value,
set: (val) => n.value = val
})
count.value = 2
console.log(count.value) // 2

. .总之，要在Vuex中使用v-model，我们需要使用一个可写的计算ref。使用复合API，它看起来像这样:

注意:我用about改变了counter变量，使代码更有意义

<script setup>
import {computed} from 'vue'
import {useStore} from 'vuex'
const store = useStore()

const about = computed({
get: () => store.state.about,
set: (text) => store.dispatch('setAbout', text)
})
</script>
<template>
<div>
<h1>{{ about }}</h1>
<input type="text" v-model="about" />
</div>
</template>