本文共 1961 字，大约阅读时间需要 6 分钟。
最近公司的事情比较多，所以好久没有更新了，今天我们写一下这个Vue持久化
在很多应用场景下，我们需要在组件之间共享状态，还有一些全局变量，我们需要在很多地方用的，这就存在了共享。Vuex是一个专门为vue.js应用开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex官网：
安装步骤
1、安装依赖
执行命令： npm add vuex
2、添加store
在src目录下新建一个store目录，专门管理应用状态，在store目录下新建index.js
和modules目录，在modules目录下新建app.js
index.js:在index.js中引入vuex并统一组织导入和管理子模块。
app.js : 属于应用内的全局性的配置，比如主题色、导航栏收缩状态等；
index.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
// 引入子模块
import app from './modules/app'
const store = new vuex.Store({
modules: {
app: app
}
})
export default store
app.js
export default {
state: {
appName: "Mango Platform", // 应用名称
themeColor: "#14889A", // 主题颜色
oldThemeColor: "#14889A", // 上一次主题颜色
collapse:false, // 导航栏收缩状态
menuRouteLoaded:false // 菜单和路由是否已经加载
},
getters: {
collapse(state){// 对应着上面state
return state.collapse
}
},
mutations: {
onCollapse(state){ // 改变收缩状态
state.collapse = !state.collapse
},
setThemeColor(state, themeColor){ // 改变主题颜色
state.oldThemeColor = state.themeColor
state.themeColor = themeColor
},
menuRouteLoaded(state, menuRouteLoaded){ // 改变菜单和路由的加载状态
state.menuRouteLoaded = menuRouteLoaded;
}
},
actions: {
}
}
3、引入store
在main.js中引入store，如下图：
到此，我们已经完成了store的配置，接下来就是使用了。
4、使用
我们这里以头部的headBar.vue的收缩状态使用为例，其他页面同理
首先通过computed技算属性引入store属性，这样就可以直接在页面通过collapse应用状态值了，如果不嫌长，也可以不用计算属性，直接在页面中通过state=>state.app.collapse引用
computed:{
...mapState({
collapse: state=>state.app.collapse
})
}
然后在页面通过collapse的状态值来绑定不同的宽度样式
<el-menu-item index="1" @click="onCollapse"><hamburger :isActive="collapse"></hamburger></el-menu-item>
收缩组件
在src目录下新建components目录，并在目录下创建导航栏收缩展开组件Hamburger
组件是用SVG绘制的，绘制根据isActive状态决定是否旋转、显示、收缩和展开状态不同的图像
在头部区域headBar中引入hamburger,并将自身isActive状态跟收缩状态collapse绑定，
我们这里已经绑定了，所以就不用重复操作了。
单击导航栏收缩组件区域的响应函数，设置导航收缩状态到Store
// 折叠导航栏
onCollapse: function() {
this.$store.commit('onCollapse')
},
到此我们已经完成了整体配置，下面进行测试。
页面测试
启动项目在浏览器访问：
点击登录进入主页面
点击一下收缩按钮，可以看到头部折叠回去了，再点击一下展开
因为代码比较多，所以没有粘贴全，有需要的请私信博主。
好啦，我们已经完成了，管理应用的状态，看完记得点赞哦！
转载地址：http://wphgf.baihongyu.com/