管理应用状态（八）

使用 Vuex 管理应用状态

1. 引入背景

像先前我们是有导航菜单栏收缩和展开功能的，但是因为组件封装的原因，隐藏按钮在头部组件，而导航菜单在导航菜单组件，这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改，导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷新导航菜单样式。后续类似的组件状态共享还会有许多。为了解决组件间状态的共享，增加组件交互的易用性，我们引入 vuex 专门管理应用状态。

2. 安装依赖

执行以下命令，安装 vuex 依赖。

npm install vuex --save

3. 添加配置

3.1 添加 Store

在 src 目录下，新建一个 store 目录，专门管理应用状态，在 index.js 中创建 store。

index.js

import Vue from ‘vue‘
import vuex from ‘vuex‘

Vue.use(vuex);

const store = new vuex.Store({
    state:{
        collapse:false  // 导航栏收缩状态
    },
    mutations:{
        collapse(state){  // 改变收缩状态
            state.collapse = !state.collapse;
        }
    }
})

export default store

3.2 引入 Store

 在 main.js 引入 store

4. 使用 Store

4.1 修改状态

在原先响应折叠导航栏的函数内替换原有逻辑，改为发送提交请求来改变收缩状态。

HeadBar.vue （一定要加this，原文没有，会报错）

4.2 获取状态

在原先引用 collapse 的地方改为引用 $store.state.collapse 。

MenuBar.vue

 HeadBar.vue

 Main.vue

5. 测试效果

进入主页，点击收缩按钮，效果如下图。

管理应用状态（八）

原文：https://www.cnblogs.com/windok/p/10683544.html