通过Vue计算属性监听Vuex中状态变量的变化

您所在的位置：网站首页 › 监听vuex数据 › 通过Vue计算属性监听Vuex中状态变量的变化

通过Vue计算属性监听Vuex中状态变量的变化

2024-05-31 03:43| 来源: 网络整理| 查看: 265

通过Vue计算属性监听Vuex中状态变量的变化 1，引出需求2，旧的解决方案3，新的解决方案

1，引出需求

当菜单栏的折叠按钮发生变化时，地图的大小跟着变化。折叠按钮在布局组件中，地图组件在布局组件的子组件中，其关系是如下图示。

布局组件子组件地图组件

需求是在地图组件里监听折叠按钮变化时的值。当其折叠时，地图变大，当其展开时，地图缩小。

2，旧的解决方案

我们知道Vue提供了父子通信的功能。父传子通过Props方式，因此我就做了两层的父传子，最终实现了在地图组件中监听到布局组件的折叠按钮的变化。

布局组件绑定折叠属性子组件声明及绑定 props: { childCollapsed: Boolean, }, 地图组件引用并监听 subChildCollapsed:{ type: Boolean, required: true }

我么看到这是组件层次为两层时候的代码冗余度，如果在具有更深组件深度的大型项目中，其复杂度的可想而知。

3，新的解决方案

Vuex为解决该问题带来了光，并指定了规范。让开发者更加容易管理全局变量。

声明全局状态 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state:{ collapsed: false, }, mutations:{ /*更改菜单是否折叠*/ changeCollapsed(){ this.state.collapsed = !this.state.collapsed;`在这里插入代码片` }, }, }); export default store

引用全局状态在用到全局状态的地方调用$store.state.collapsed即可，而且更改该值后视图会自动刷新。

监听全局状态变量 3.1 在计算属性中返回该值：

computed:{ collapsed(){ return this.$store.state.collapsed; } },

3.2 在监听属性里监听：

watch:{ collapsed: function (val){ console.log(val); } }

【本文地址】

通过Vue计算属性监听Vuex中状态变量的变化

通过Vue计算属性监听Vuex中状态变量的变化

今日新闻

推荐新闻