【vuex】store的用法和全局监控

最新推荐文章于 2024-07-01 17:07:49 发布

北京大丸子

最新推荐文章于 2024-07-01 17:07:49 发布

阅读量373

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/jiang396/article/details/121511418

文章讲述了在Vue.js应用中如何使用Vuex进行全局状态管理。具体包括在store的index.js中定义和赋值全局变量，如`globalloginvisible`和`creditapplydata`，通过mutations的方法`setgloballoginvisible`来改变状态，以及在组件中通过computed属性和watch来监听并响应状态变化。

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

//////////////////////////////////////////////////////////////
//1.store的变量定义和赋值方法---在store的index.js里面
//////////////////////////////////////////////////////////////
 state: {
    globalloginvisible: false,  //用于控制token失效后的login弹窗开关
    creditapplydata: {} //从服务器获取每笔融资需求的数据
  },
  mutations: {
    // 修改变量的方法
    setgloballoginvisible(state, data) {
      state.globalloginvisible = data
    }
  },

//////////////////////////////////////////////////////////////
//2.方法的调用
//////////////////////////////////////////////////////////////

  if (response.data.msg == 419) {
    store.commit("setgloballoginvisible", true)
    
  }

//////////////////////////////////////////////////////////////
//3.监控store的数据，要用computed的一个函数来操作
//////////////////////////////////////////////////////////////
 
computed: {
    watchgloballoginvisible() {
      return this.$store.state.globalloginvisible;
    },
  },

  watch: {
    watchgloballoginvisible(newval) {
      //你需要执行的代码
      // console.log(newval, "监控globalloginvisible");
      this.fvisible = newval;
    },
  },