v-model与store.state双向绑定

---

一、Vue页面

<template>
	<div>
		<el-input v-model="transValue" placeholder="绑定参数" clearable></el-input>
	</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      multipleSelection: []
    }
  },
  created(){
    this.$store.dispatch('getList')
  },
  computed:{
    // v-model与store中的state双向绑定
    transValue: {
      get() {
        return this.$store.state.inputValue
      },
      set(value) {
        this.$store.commit('setInputValue', value)
      }
    }
  }
}
</script>

二、Store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    inputValue: 'aaa',  // 文本框的内容
  },
  getters: { },
  mutations: {
    // 为state中的inputValue赋值
    setInputValue(state, value){
      state.inputValue = value
    }
  },
  actions: { }
  },
  modules: { }
})

三、效果展示