下一篇:解耦Vuex,使用模块化(modules)来搭建Vuex
工作的时候有好多人问到了一个问题:
我的input框v-model绑定的是Vuex里的state,但是没有做到双向绑定。今天就聊一下如何优雅的绑定Vuex
- 第一种(暴力流)
<div>
<input type="text" v-model="$store.state.Root.value" />
<p>{{ $store.state.Root.value }}</p>
// 这里为什么是state.Root.value 是我这里用到了vuex里的modules
// 关于modules我会用新一篇文章来介绍,这里大家看看就行
</div>
复制代码
-
我们都知道v-model是一种语法糖:
<input type="text" v-model="val" /> 复制代码
等价于
<input type="text" :value="value" @input="value = $event.tagret.value" /> 复制代码
-
其实第一种方法就是利用了v-model的语法糖,至于为什么不需要mutations我猜是因为对象的引用关系
- 第二种(优雅型,通过computed)
- 这种方式一直是我在团队里比较建议使用的,因为它遵从了Vuex的核心理念:使用mutations来改变state
-
<input v-model="getVal" /> computed: { getVal: { get() { // 这里也是用了Vuex里的 modules 大家可以当成普通的变量来看 return this.$store.state.Root.value }, set(newVal) { this.$store.commit('handleVal', newVal) } } } 复制代码
- computed其实可以接受两个参数:
- get:当获取值时会触发
- set:当修改值时会触发并有新值作为参数返回
- 所以我在get里获取Vuex
- 在set里调用 mutations
-
// store.js mutations: { handleVal(state, payload) { state.value = payload } } 复制代码
所有评论(0)