具体步骤：
1、安装vuex( vue3建议 4.0+ )
pnpm i vuex -S
2、main.js中配置
import store from '@/store' // hx-app的全局配置 const app = createApp(App) app.use(store)
3、新建相关的文件夹与文件，这里配置多个不同vuex内部的js，使用vuex的modules来放不同的页面，文件，然后统一使用一个getters.js
index.js 核心文件，这里使用了import.meta.glob，而不是require
立即学习“前端免费学习笔记（深入）”；
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 storegetters.js 内部根据不同的页面来发送不同的state数据
const getters = {
sidebar: state => state.app.sidebar,
token: state => state.user.token,
}
export default gettersapp.js 可以定义不同的变量，然后统一 export default
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
}user.js 也可以直接返回一个对象，写法都可以
export default {
state: {
token: '123'
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
},
actions: {
}
}4、具体页面使用
1）引入
import { useStore } from 'vuex'2）具体使用
setup(){
const store = useStore()
}
3）使用 mutations里面的方法
store.commit("app/TOGGLE_SIDEBAR", 1)4）使用actions里面的方法
免费 盛世企业网站管理系统(SnSee)系统完全免费使用，无任何功能模块使用限制，在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源 系统Web代码完全开源，在您使用过程中可以根据自已实际情况加以调整或修改，完全可以满足您的需求。强大且灵活 独创的多语言功能，可以直接在后台自由设定语言版本，其语言版本不限数量，可根据自已需要进行任意设置；系统各模块可在后台自由设置及开启；强大且适用的后台管理支
store.dispatch("app/asyncAddStoreCount", 2)5、vuex中推出了一个插件(vuex-persistedstate)，可以解决刷新数据无保存的问题, 可以把数据除了vuex以外，在本地和会话（都支持）储存下
1）安装
pnpm i vuex-persistedstate -S
2）store/index.js
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
})
]
})API
创建一个新的插件实例，使用提供的选项来生成持久化状态。可以提供以下选项来配置您的特定需求的插件：
key ：存储持久状态的键。（默认：vuex）
paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）
reducer ：一个函数，将被调用来基于给定的路径持久化的状态。默认包含这些值。
subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)
storage ：而不是（或与）getState和setState。默认为localStorage。
getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。
setState ：将被调用来保持给定状态的函数。默认使用storage。
filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true
