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~~~

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

相关推荐
潜意识起点13 分钟前
精通 CSS 阴影效果:从基础到高级应用
前端·css
奋斗吧程序媛18 分钟前
删除VSCode上 origin/分支名,但GitLab上实际上不存在的分支
前端·vscode
IT女孩儿28 分钟前
JavaScript--WebAPI查缺补漏(二)
开发语言·前端·javascript·html·ecmascript
m0_748256563 小时前
如何解决前端发送数据到后端为空的问题
前端
请叫我飞哥@3 小时前
HTML5适配手机
前端·html·html5
@解忧杂货铺5 小时前
前端vue如何实现数字框中通过鼠标滚轮上下滚动增减数字
前端·javascript·vue.js
F-2H6 小时前
C语言:指针4(常量指针和指针常量及动态内存分配)
java·linux·c语言·开发语言·前端·c++
苹果酱05676 小时前
「Mysql优化大师一」mysql服务性能剖析工具
java·vue.js·spring boot·mysql·课程设计
gqkmiss7 小时前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247559 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php