vue3+webpack5 ---- 引入vuex

继续上回，引入vuex

添加vuex

npm insatll vue@4.0.2

index.js 代码

import { createStore } from 'vuex'
import getters from './getters'
 
//获取modules下的所有文件
const modulesFiles = require.context('./modules', true, /\.js$/

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

// 创建一个新的 store 实例
const store = createStore({
  modules,
  getters
})

export default store

user.js
import {setToken} from '@/utils/auth'
const { name: packageName } = require('../../../package.json')

const user = {
  namespaced: true,
  // 仓库数据
  state: () => ({
    token:'',
    userName:'',
    avter:'',
    role:''
  }),
  //同步处理state
  mutations: {
    setToke(state,val){
      console.log(val)
      state.token=val.token
      state.userName=val.userName
      state.avter=val.avter
      state.role=val.role
    }
  },
  // 异步处理
  actions: {
    login({commit},userInfo){
      return new Promise((resolve, reject) => {
          if(userInfo.username === 'admin'){
            let res={code:200,msg:'成功',data:{userName:'admin',token:'11111',role:'admin',avter:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'}}
            commit("setToke",res.data)
            setToken(packageName,res.data.token)
            resolve(res)
          }else{
            reject({code:400,msg:'失败',})
          }
      })
    }
  }
}
export default user

get.js
const getters = {
  token: state => state.user.token
}
export default getters

diam中使用

import { useStore } from 'vuex'
 const store = useStore()
 
   return {
      store
    }
 <span> {{ store.state.user.userName || 'admin' }}</span>

axios,没用到就没封装。。 基本项目完成了，剩下就是优化，和使用代码，优化大包配置推荐juejin.cn/post/702324…