文章详情页
html5 - vue项目中vuex存储问题
问题描述
实现效果:点击按钮切换左边菜单的宽度。
我现在已经用Vuex存储了一个字段IsOpen,然后nav组件和menu组件都已经获取到了字段的初始值,点击nav组件按钮的时候也切换了IsOpen的值,但是改变宽度的类名没有切换。
这是nav组建的代码:
这是menu组件的代码:
问题解答
回答1:import { mapGetters } from ’vuex’
export {
computed: mapGetters[’toggleClass’]
}
在仓库的 getters 文件里面写切换样式的代码
回答2:请仔细阅读vuex文档
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store中的状态发生变化,那么相应的组件也会相应地得到高效更新。
你可以直接将vuex的数据绑定到你的标签上
<p v-bind:class='[this.$store.getters.isOpen ? ’openWidth’, ’closeWidth’]'></p>
标签:
Html5
相关文章:
1. 为什么微信内置浏览器用$_COOKIE取不到值?2. objective-c - iOS开发支付宝和微信支付完成为什么跳转到了之前开发的一个app?3. mysql怎么修改约束啊4. 这里举例有错吗5. html5 - 新手提问:为什么form表单的post请求 路由处理不了6. css - 求推荐几款好用的移动端页面布局调试工具呢?7. css - 为何flex的align-items: center无法垂直居中?8. javascript - 性能优化的问题9. 最新版 Cmder 结合 Ubuntu bash on windows10 使用时每个汉字都重复出现10. android - 安卓使用webview播放腾讯、优酷视频的方法
排行榜