vuex这种写法为什么不能双向绑定？

Question

• comp.vue

<el-input v-model="myVariable.a" />

data(){
      return{
        myVariable:this.$store.state.variable
      }
    },
    watch:{
      myVariable:{
        handler(val){
          this.$store.commit('setVariable',val);
        },
        deep:true,
      }
    },

• store/index.js

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

Vue.use(Vuex);

const store=new Vuex.Store({
  state:{
    variable:{
      a:1,
      b:2
    }
  },
  mutations:{
    setVariable(state,val){
      state.variable=val;
    }
  }
});

export default store

现在修改state里的a，输入框的值没有变化，为什么？
myVariable跟vuex里的variable不应该是双向绑定的吗？

Answer 1

把data暴露的 this.$store.state.variable 换成computed 来暴露。因为computed是计算属性会监听state中的变化返回值。而data不会监听源数据变化重新改变值

Answer 2

不能给对象属性直接赋值，这样vue是监听不到数据变化的。
要知道对象变量保存的是引用地址，你直接改变a时，并没改变变量所保存的引用地址，所以vue认为变量没变。
你这样虽然改变了a的值，但是vue认为variable没变，所以不会去更新dom。
举个例子：
// obj是常量，保存了一个对象的引入地址（比如你家的门牌号，vue监听的就是你的门牌号）
let obj = {};
// 给属性赋值----（你们搬家了，又搬来了另一家人，但是门牌号并没有变，不触发dom更新）
obj.name = "test";
// 直接改变obj----（obj保存的门牌号变了，所以这时就会触发dom的更新）
obj = {name: "test"};

Answer 3

可以看看这一块:
vue-doc 计算属性的setter

Answer 4

才发现这篇讲的挺详细的https://vuex.vuejs.org/zh/gui...