Vuex读取数据问题

最新推荐文章于 2024-11-18 10:44:02 发布

原创最新推荐文章于 2024-11-18 10:44:02 发布 · 628 阅读

0 ·

CC 4.0 BY-SA版权

日常工作专栏收录该内容

17 篇文章

订阅专栏

本文探讨了Vuex在跨组件状态管理中的应用，强调其在处理全局属性变化时的优势，并分享了一个常见问题的解决方案：如何确保实时获取Vuex中变化的数据。

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

1.Vuex使用场景

Vuex使用主要是在跨组件时使用，又叫做状态管理，属性的变化能够实时的进行计算，使用起来非常便捷，主要是管理一些全局属性并且需要不断变化的，不需要变化的可以使用sessionStorage存在本地就可以。

2.使用遇到的问题

最近使用vuex遇到一个问题，在读取时发现从vuex中无法读取到值，

 handleDashBoard(){
        //读取页面此时的布局
        console.log(this.LeftClass+"|"+this.RightClass);
}
computed：{
      LeftClass(){
        return  this.$store.getters.getCurrLayout.leftClass;

      },
      RightClass(){
        return  this.$store.getters.getCurrLayout.rightClass;
      },
}

到后来发现原来是因为读取值的时候，我是在created中进行初始化值，只读取了一次值，于是我写在watch中

watch: {
      LeftClass: function (val, OldVal) {
        this.handleDashBoard()
      },
      RightClass: function (val, OldVal) {
        this.handleDashBoard()
      },
}

进行初始化值。这样就可以读取的值。