使用vuex监控状态的变化实时更新状态

模板页面

data() {
    return {
      active: 0
    };
  },
  created() {
    this.active = sessionStorage.getItem("titleactive");
  },
  watch: {
    "$store.state.item_id": function() {
      //你需要执行的代码
      this.active = this.$store.state.item_id;
      console.log(this.active);
      console.log(this.$store.state.item_id);
    }
  },

methods里面的方法调用store里面的数据
this.$store.commit("item_id", this.business_id);

store文件夹里面的index文件

//引入vue  引入vuex并且使用use Vuex
import Vue from 'vue'
import Vuex from 'vuex'

//使用vuex
Vue.use(Vuex);

//state在Vuex中用于存储数据
var state = {//要设置的全局访问的state对象
    item_id: 0
}

//mutations里面放的是方法,方法主要用于改变state里面的数据
var mutations = {
    item_id: function (state, id) {
        state.item_id = id
    }
}

//vuex 实例化vuex.store
const store = new Vuex.Store({
    state,
    mutations: mutations
})

//暴露
export default store;
Logo

前往低代码交流专区

更多推荐