vue3中vuex的使用

64 阅读1分钟

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

QQ截图20230912104908.png

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)