vue中深度监听vuex中的值的变化

vue中深度监听vuex中的值的变化

1、首先用npm引入vuex；
2、创建一个vuex的js文件 比如：在store文件夹下面创建index.js文件；
3、在main.js中引入并绑定到vue原型上；

import store from './store/index'
Vue.prototype.$store = store;

index.js文件

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

Vue.use(Vuex);
let store = new Vuex.Store({
  state:{
    deviceId:"",
  },

  getters:{

  },

  actions:{

  },


  mutations:{
    // 加油站的id
    setDeviceId(state, val){
      state.deviceId = val;
    },
  }
});
export default store;

4、向vuex中存值

 this.$store.commit("setDeviceId",val);

5、在另外一个组件中深度监听

	watch:{
        deviceId:{
          handler(deviceId){
            //this.device_id = deviceId.id;
            //this.requireDeviceList(deviceId.id);
          },
          deep: true,
          immediate: true,
        }
      },
      computed:{
        deviceId(){
          return this.$store.state.deviceId;
        }
      },