1.新建store文件夹,下新建modules文件夹,index.js文件

index.js 文件
import { createStore } from 'vuex'
import getters from './getters'
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const name = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[name] = value.default
return modules
}, {})
export default createStore({
modules,
getters
})
module下的user.js文件
import { setToken, getToken, removeToken } from '@/utils/token'
const state = {
userName: '',
userId: null,
token: getToken(),
resources: [],
globalState: {},
roles: [],
allResources: []
}
const mutations = {
SET_NAME: (state, name) => {
state.userName = name
},
SET_TOKEN: (state, token) => {
setToken(token)
state.token = token
},
SET_USERID: (state, id) => {
state.userId = id
},
SET_RESOURCES: (state, resources) => {
state.resources = resources
},
SET_GALOBAL_STATE: (state, props) => {
state.globalState = props
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_GLOBAL_STATE: (state, globalState) => {
state.globalState.setGlobalState(globalState)
},
SET_ALL_RESOURCES: (state, resources) => {
state.allResources = resources
}
}
const actions = {
reset: ({ commit }) => {
removeToken()
commit('SET_NAME', '')
commit('SET_TOKEN', '')
commit('SET_USERID', null)
commit('SET_RESOURCES', [])
commit('SET_ROLES', [])
commit('SET_GLOBAL_STATE', state)
return Promise.resolve()
},
setUserInfo: ({ commit }, { userName, userId, token, resources, roles }) => {
commit('SET_NAME', userName)
commit('SET_TOKEN', token)
commit('SET_USERID', userId)
commit('SET_RESOURCES', resources)
commit('SET_ROLES', roles)
}
}
export default {
namespaced: true,
actions,
mutations,
state
}
2.组件中使用
import { useStore } from 'vuex'
const store = useStore()
store.state.user.xxx
store.getters.user.xxx
store.commit('user/SET_NAME', name)
store.dispatch('user/setUserInfo', userInfo)