Vue v-model绑定到vuex state数据

Vue中使用v-model实现表单元素数据双向绑定到组件中data中的变量。最近在开发naive-desktop-translator时,遇到一个需求,需要把表单元素直接通过v-model绑定到Vuex中的state值上。在网上搜索后,参考这篇博客的解决方案,先使用v-model绑定到组件内的一个computed计算属性上,再通过自定义该计算属性的getset方法,对Vuex中的状态变量进行读取、写入操作。模板代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
<div>
<!-- v-model bind to local computed property 'message' -->
<input v-model="message" placeholder="type something...">
{{ message }}
</div>
</template>

<script>
export default {
name: 'input-component',
computed: {
message: {
// custome get() and set() of this local computed property
get () {
// get stored message
return this.$store.state.message;
},
set (newMessage) {
// commit a mutation to set message
this.$store.commit('setMessage', newMessage);
}
}
}
}
</script>

<style scoped>
</style>

其他的参考: