通过Vuex实现Input双向绑定

通过Vuex实现Input的双向绑定

• 安装Vuex

yarn add vuex

• 引入Vuex

import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#main')

• 新建store.js

import Vue from 'vue'
import Vuex from 'vuex'
const store = new Vuex.store({
    state:{
      inputVal: 'Hello'
    },
    mutations:{
      setInput (state, newVal) {
        state.inputVal = newVal
      }
    }
})

• 页面中绑定

<template>
  <div>
    <input v-model = 'myVal'>
  </div>
</template>
<script>
export default {
  computed: {
    myVal (e) {
      get() {
        return this.$store.state.inputVal
      },
      set(newVal) {
        this.$store.commit('setInput', newVal)
     }
    }
  }
}
</script>