将v-model的值绑定到vuex中时遇到的问题及解决办法(computed替代watch)
store.js如下:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { value: 100 }, mutations: { updateValue(state, value) { state.value = value } } })
组件中使用vuex中的value:
<el-input v-model="myValue"></el-input> <p>{{value}}</p>
import { mapState, mapMutations } from 'vuex' export default { data() { return { myValue: 0 } }, computed: { ...mapState({ value: (state) => state.value }) }, watch: { myValue(newVal) { this.updateValue(newVal) } }, methods: { ...mapMutations({ updateValue: 'updateValue' }) }, created() { const { value } = this this.myValue = value } }
思路:将vuex中的value映射到组件的myValue中,页面渲染myValue。v-model修改myValue时通过watch监听去改变vuex中的value
其实是可以有简便方法去双向绑定value的
思路:通过使用computed的get和set方法去获取和改变vuex中的value
<el-input v-model="value"></el-input> <p>{{value}}</p>
computed: { value() { return this.$store.state.value } }
页面效果:
但是此时在输入框内输入或删除字符,就会报错:
原因是通过v-model设置value的值,就是要触发computed,但此时value值只设置了get而没有设置set,解决:
computed: { value: { get(){ return this.$store.state.value }, set(value) { this.$store.commit('updateValue', value) } } }
这样,就可以实现将数据双向绑定到vuex中了。