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

下一篇：解耦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
       }
   }
  复制代码

demo我放到github上啦

转载于:https://juejin.im/post/5c2319f3e51d45745544f270