vuex实现store双向绑定

402 阅读1分钟
// --组件页面
<el-input placeholder="请输入内容" v-model="inputVal"> </el-input>

computed: {
    inputVal: {
      // 当读取stateValue的时 会调用get里的方法
      // 当改变state的值是会调用set方法
      // 参数value为新赋的值,在set方法中通过commit提交一个mutation改变state值
      get() {
        return this.$store.state.todosStore.inputVal
      },
      set(val) {
        this.INPUTVALCHANGE(val)
      }
    }
},
  
// --store.js
mutations:{
    INPUTVALCHANGE(state, val) {
      console.log(val, 'inpuval')
      state.inputVal = val
    }
},
state: {
    // 输入框内容
    inputVal: '22'
}