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

最新推荐文章于 2022-09-03 22:51:27 发布

原创最新推荐文章于 2022-09-03 22:51:27 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

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

vue 同时被 2 个专栏收录

60 篇文章

订阅专栏

前端知识

51 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用Vuex进行状态管理，包括如何监控状态变化并实时更新，以及如何在组件中调用store里的数据。通过具体代码示例，读者可以学习到Vuex的基本使用方法和最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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;