Vue中v-model如何和Vuex结合起来

原创已于 2022-07-12 14:13:31 修改 · 2.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2022-03-25 16:04:15 首次发布

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在Vue项目中如何优雅地实现Vuex状态管理的双向绑定。通过两种方式探讨了这一问题：直接利用v-model语法糖进行绑定以及通过computed属性结合mutations更新状态。

我的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="modelData" />
 
computed: {
	    modelData: {
	        get() {
	             // 这里也是用了Vuex里的 modules 大家可以当成普通的变量来看
	            return this.$store.state.modelData
	        },
		         set(newVal) {
		             this.$store.commit('modelData', newVal)
		         }
	    }
}

注: computed其实可以接受两个参数：
get：当获取值时会触发
set：当修改值时会触发并有新值作为参数返回

所以我在get里获取Vuex
在set里调用 mutations

// store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
  modelData：' '
    }
  },
  getters: {},
  mutations: {
     modelData(state, payload) {
         state.value = payload
     }
 }
  actions: {}
});

export default store;
window.store = store;