1、Vuex简单介绍(详细请见:点击打开链接)
Vuex是一个专为 Vue.js 应用程序开发的
状态管理模式。它采用集中式储存管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
项目结构如下:
- 应用层级的状态应该集中到单个store对象中
- 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的
- 异步逻辑应该封装到 action 里
2、实际项目中的应用(主要代码,后续会将项目上传)
- store.js
import Vuefrom'vue'
import Vuexfrom'vuex'
import gettersfrom'./getters'
import appfrom'./modules/app';
import userfrom'./modules/user';
import permissionfrom'./modules/permission';
Vue.use(Vuex)
const store =newVuex.Store({
modules: {
app,
user,
permission
},
getters
});
export defaultstore
- getters.js
const getters = {
sidebar: state=>state.app.sidebar,
visitedViews: state => state.app.visitedViews,
avatar: state=>state.user.avatar,
name: state=>state.user.name,
introduction: state => state.user.introduction,
status: state=>state.user.status,
roles: state=>state.user.rol