html5 - vue项目中vuex存储问题
本文介绍了html5 - vue项目中vuex存储问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
实现效果:点击按钮切换左边菜单的宽度。
我现在已经用Vuex存储了一个字段IsOpen,然后nav组件和menu组件都已经获取到了字段的初始值,点击nav组件按钮的时候也切换了IsOpen的值,但是改变宽度的类名没有切换。
这是nav组建的代码:
这是menu组件的代码:
解决方案
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store
中的状态发生变化,那么相应的组件也会相应地得到高效更新。
你可以直接将vuex的数据绑定到你的标签上
<div v-bind:class="[this.$store.getters.isOpen ? 'openWidth': 'closeWidth']"></div>
这篇关于html5 - vue项目中vuex存储问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文