vue 页面监听vuex state值的变化

A组件(事件操作):

bash 复制代码
   methods: {
   	  // 收缩菜单
      menuShrink () {
         this.iscollapse = !this.iscollapse;
         this.$store.state.iscollapse = this.iscollapse;
      },
   }

B组件(监听state某值的变化做一些逻辑代码)

  1. 先用computed(计算属性)拿到state值
  2. 再用watch去监听
bash 复制代码
   computed: {
      iscollapse () {
         return this.$store.state.iscollapse
      }
   },
   watch: {
      iscollapse (newData) {
         if (!newData) {
            this.tabsWidth = `max-width:${window.innerWidth - 200}px`;
         } else {
            this.tabsWidth = `max-width:${window.innerWidth - 65}px`;
         }
      }
   },

end~~~

如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!

相关推荐
zhaoyang03012 小时前
css3笔记 (1) 自用
前端·javascript·css·vue.js·笔记·html·css3
珎珎啊2 小时前
CSS3 常用功能详细使用指南
前端·css·css3
moxiaoran57535 小时前
uni-app萌宠案例学习笔记--页面布局和CSS样式设置
前端·css·uni-app
CrissChan6 小时前
Pycharm 函数注释
java·前端·pycharm
小小小小宇6 小时前
Vue.nextTick()笔记
前端
小约翰仓鼠8 小时前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in8 小时前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
烛阴8 小时前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
计蒙不吃鱼8 小时前
一篇文章实现Android图片拼接并保存至相册
android·java·前端