vuex与input的双向绑定

定义数据

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    inputVal: 'hello'
  },

  mutations: {
    SETINPUTVALUE (state, payload) {
      state.inputVal = payload
    }
  }
})

export default store

双向绑定

<template>
  <div id="app">
    <input type="text" v-model="inputVal">
  </div>
</template>

<script>
// import { mapState } from 'vuex'
export default {
  computed: {//不管怎么样都不能直接去更改state的数据
    // ...mapState(['inputVal'])//这样无法实现双向绑定
    inputVal: {
      get () {
        return this.$store.state.inputVal
      },

      set (newVal) {
        // 提交突变
        this.$store.commit('SETINPUTVALUE', newVal)
      }
    }
  }
}
</script>

<style>

</style>