vuex和双向绑定

v-model知识: link.
通过v-model无法对set中的值进行赋值修改，需要在组件中提交mutation进行修改

eg1

在state.js中定义一个状态值

const state = {
  stateValue: '123'
}
export default state

在mutation.js中配置，并在组件页面中引入

const mutations = {
SET_STATE_VALUE (state, value) {
    state.stateValue = value
  }
  }

methods: {
    ...mapMutations([
      'SET_STATE_VALUE'
    ])
    }

在组件中配置

      <a-input :value='stateValue' @input='handleStateChange' />
      <p>{{ stateValue }}</p>

computed: {
    ...mapState({
      stateValue: state => state.stateValue
    })

在组件的回调函数中触发mutation

methods: {
    handleStateChange (val) {
      this.SET_STATE_VALUE(val)
    }
  }

eg2自定义set和get方法

之前定义的state值和mutation方法已经组件中的不变 在组件页面中配置

<a-input v-model="stateValue" />

注意不需要在…mapState中定义，也不需要绑定方法

computed: {
    ...mapState({
    
    }),
    stateValue: {
      // 当读取stateValue的时 会调用get里的方法
      // 当改变state的值是会调用set方法
      // 参数value为新赋的值，在set方法中通过commit提交一个mutation改变state值
      get () {
        return this.$store.state.stateValue
      },
      set (value) {
        this.SET_STATE_VALUE(value)
      }
    },
  }