管理应用状态（八）

佚名 6年前 (2019-04-10) 随笔 1485人围观抢沙发百度已收录

使用 Vuex 管理应用状态

1. 引入背景

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

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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