对vue-element-admin后台开源框架的解读---vuex篇
篇
对vue-element-admin后台开源框架的解读—vuex
1.vuex核⼼–index.js
项⽬代码
import Vue from'vue'
import Vuex from'vuex'
import getters from'./getters'
Vue.use(Vuex)
const modulesFiles = t('./modules',true,/\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath)=>{
const moduleName = place(/^\.\/(.*)\.\w+$/,'$1')
const value =modulesFiles(modulePath)
modules[moduleName]= value.default
return modules
},{})
const store =new Vuex.Store({
modules,
getters
})
export default store
解析1
批量引⼊vuex module从modules⽂件夹（对于模块特别多的vuex⾮常⽅便）不需要⼀个⼀个去import.
const modulesFiles = t(’./modules’, true, /.js$/)
Webpack API ----- t() 函数来创建⾃⼰的 context。
可以给这个函数传⼊三个参数：
1. ⼀个要搜索的⽬录
2. ⼀个标记表⽰是否还搜索其⼦⽬录
3. ⼀个匹配⽂件的正则表达式。
⽰例
// （创建出）⼀个 context，其中所有⽂件都来⾃⽗⽂件夹及其所有⼦级⽂件夹，request 以 `.stories.js` 结尾。
解析2
对批量引⼊的模块通过数组的reduce⽅法让所有摸块组成⼀个⼤对象
把每⼀个js模块⽂件格式化为模块名 ./app.js’ => ‘app’
通过modulesFiles(modulePath)获取每个模块的内容
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = place(/^./(.*).\w+$/, ‘$1’)
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
解析3
将vuex模块和getters注⼊store，并导出
const store = new Vuex.Store({
modules,
getters
})
2.vuex的计算属性–getters.js
将getters单独创建⼀个模块，配合 mapGetters 辅助函数可以很⽅便的获取vuex中的⼀些简单数据
const getters ={
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => ken,
......
}
export default getters
mapGetters 辅助函数获取数据
在组件中直接获取token
computed:{
...mapGetters(['token'])
}
3.vuex模块—登录，获取⽤户信息，登出模块–user.js
import{ login, logout, getInfo }from'@/api/user'
import{ getToken, setToken, removeToken }from'@/utils/auth'
import router,{ resetRouter }from'@/router'
const state ={
token:getToken(),
name:'',
avatar:'',
introduction:'',
roles:[]
}
// 注册所有的mutation⽅法
const mutations ={
//将函数赋值给⼀个变量
SET_TOKEN:(state, token)=>{
},
SET_INTRODUCTION:(state, introduction)=>{
state.introduction = introduction
},
SET_NAME:(state, name)=>{
state.name = name
},
SET_AVATAR:(state, avatar)=>{
state.avatar = avatar
},
SET_ROLES:(state, roles)=>{
}
}
//注册所有的action⽅法
const actions ={
// 登录
// 将commit 从 context 中结构出来
// Promise封装的组合式action
login({ commit }, userInfo){
const{ username, password }= userInfo
return new Promise((resolve, reject)=>{
return new Promise((resolve, reject)=>{
login({ username: im(), password: password }).then(response =>{ const{ data }= response
commit('SET_TOKEN', ken)
ken)
resolve()
}).catch(error =>{
reject(error)
})
})
},
// 获取⽤户信息
// 将commit,state从 context 中结构出来
getInfo({ commit, state }){
return new Promise((resolve, reject)=>{
ken).then(response =>{
const{ data }= response
if(!data){
reject('Verification failed, please Login again.')
}
const{ roles, name, avatar, introduction }= data
// roles must be a non-empty array
if(!roles || roles.length <=0){
reject('getInfo: roles must be a non-null array!')
}
commit('SET_ROLES', roles)
commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
commit('SET_INTRODUCTION', introduction)
resolve(data)
}).catch(error =>{
reject(error)
})
})
},
// 登出
/
/ 将commit, state, dispatch 从 context 中结构出来
logout({ commit, state, dispatch }){
return new Promise((resolve, reject)=>{
ken).then(()=>{
commit('SET_TOKEN','')
commit('SET_ROLES',[])
removeToken()
resetRouter()
// reset visited views and cached views
// to fixed github/PanJiaChen/vue-element-admin/issues/2485
dispatch('tagsView/delAllViews',null,{ root:true})
resolve()
}).catch(error =>{
reject(error)
})
})
},
// 清除token
resetToken({ commit }){
return new Promise(resolve =>{
commit('SET_TOKEN','')
commit('SET_TOKEN','')
commit('SET_ROLES',[])
removeToken()
resolve()
})
},
// 动态地修改权限
// async,await封装的组合式action
async changeRoles({ commit, dispatch }, role){
const token = role +'-token'
commit('SET_TOKEN', token)
setToken(token)
const{ roles }=await dispatch('getInfo')
resetRouter()
// ⽣成基于⾓⾊的可访问路由
// 需要分发其他模板的action或者提交其他模板的mutation的时候，需要加上{ root: true } const accessRoutes =await dispatch('permission/generateRoutes', roles,{ root:true}) // 动态添加可访问的路由
router.addRoutes(accessRoutes)
// 重置已访问视图和缓存视图
dispatch('tagsView/delAllViews',null,{ root:true})
}
}
export default{
//添加 namespaced: true 的⽅式使其成为带命名空间的模块
namespaced:true,
state,
vue element adminmutations,
actions
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。