vue之vuex项目实战

首先，vuex是vue.js的状态管理共享库，将共享代码抽取出来，形成全局单例模式，任何组件都可调用

 

 

index.js创建store的模块集合

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters' //获取全局属性
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import permission from './modules/permission' //用户权限
import common from './modules/commom' //公共方法

Vue.use(Vuex)

const store = new Vuex.Store({
     modules:{
        app,
        settings,
        user,
        permission,
        common
     },
     getters
})
export default store

getters.js获取全局属性

const getters = {
     sidebar:state=>state.app.sidebar,
     device:state=>state.app.device,
     token:state=>state.user.token,
     avatar:state=>state.user.avatar,
     name:state=>state.user.username,
     roles:state=>state.user.roles,
     major:state=>state.user.major,
     organzation:state=>state.user.organzation,
    premission_routes:state=>state.premission.routes,
    menus:state=>state.user.menus
}
export default getters