Vuex store 修改值、监听

vue开发中少不了组件之间的通信，如果是非父子组件的通信，需要进行数据交互的话会比较困难，所以就会使用到Vuex

按照一个正常的vuex通信，我们store中有state、mutations等方法

export default new Vuex.Store({
  state: {
    elementVersion:'all', //快捷版本、综合版本
  },
  mutations: {
    //版本切换
    setElementVersion(state,val){
        state.elementVersion = val;
    }
  },
  actions: {
  },
  modules: {
  }
})

上述的代码中，值得注意的是mutations修改state值，mutations中编写一个方法，方法的传参有state和val，state特指store中的state值，val是调用这个方法时候的传参。

需要特别说明，state的修改不可以直接this.elementVersion = xxx，得调用state来修改

那么在一个组件中，正常调用store的方法如下

//更新store值
this.$store.commit('setElementVersion', elementVersion)

调用完成之后，那么store中的state值便会更新

如果我们需要在另外一个组件中监听到store值的变化，需要下述操作

data(){
 return {
    state:''
 }
},
created(){
  //进行一个变量赋值
    this.state = this.$store.state;
},
computed: {
  //录入版本
  store_elementVersion() {
    return this.$store.state.elementVersion;
  }
},
//进行监听
watch:{
  //录入版本
  store_elementVersion: {
    handler(newVal, oldVal) {
      //do something
      console.log('监听获取到的值',newVal)
    },
      immediate:true,
  }
}