vue3+vite中使用vuex的具体步骤

pnpm i vuex -S

import store from '@/store'
// hx-app的全局配置
const app = createApp(App)
app.use(store)

import getters from './getters'
import { createStore } from 'vuex'
 
const modulesFiles = import.meta.glob('./modules/*.js',{ eager: true }); // 异步方式
 
let modules = {}
for (const [key, value] of Object.entries(modulesFiles)) {
  var moduleName = key.replace(/^\.\/(.*)\.\w+$/, '$1');
  const name = moduleName.split('/')[1]
  modules[name] = value.default
}
 
const store = createStore({
  modules,
  getters
})
 
export default store

const getters = {
  sidebar: state => state.app.sidebar,
  token: state => state.user.token,
}
 
export default getters

const state = {
  sidebar: '123'
}
 
const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar = '2222'
   
  },
 
const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  }
}
 
export default {
  namespaced: true,// 为每个模块添加一个前缀名，保证模块命明不冲突
  state,
  mutations,
  actions
}

export default {
  state: {
    token: '123'
  },
 
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
  },
 
  actions: {
  }
}

import { useStore } from 'vuex'

setup(){
    const store = useStore()
}

store.commit("app/TOGGLE_SIDEBAR", 1)

store.dispatch("app/asyncAddStoreCount", 2)

pnpm i vuex-persistedstate -S

import createPersistedstate from 'vuex-persistedstate' //第一步导入
import { createStore } from 'vuex'
const store = createStore({
  modules,
  getters,
  //第二步是加这段代码,默认是存到了localStorage中
  plugins: [
    createPersistedstate({
      key: 'vuex-local', //存储持久状态的键。（默认：vuex）
      paths: ['user'], //部分持续状态的任何路径的数组。如果不加，默认所有。
      // storage: window.sessionStorage //默认存储到localStorage,想要存储到sessionStorage
    })
  ]
})