引入状态管理-vuex

1、引入依赖，npm install vuex@next
2、src下新建目录store文件夹
3、main.ts引入store
import store from './store';

createApp(App).use(ElementPlus).use(router).use(store).mount('#app')

4、具体页面应用store
import { useStore } from 'vuex';

const store = useStore();
const count = computed(() => store.state.count);
const increment = () => {
store.commit('increment');
};
5、众所周知，vuex有个刷新数据丢失的问题，解决办法
Vuex 有一些第三方插件，如 vuex-persistedstate，
npm install vuex-persistedstate
store配置：
import createPersistedState from 'vuex-persistedstate';

const store = createStore({
state: {
// 你的状态
},
mutations: {
// 你的mutations
},
// 其他配置...
plugins: [createPersistedState()],
});

也可以手动存储，在 Vuex 的 mutations 或 actions 中，可以在状态改变时将其保存到本地存储：
const user = JSON.parse(localStorage.getItem('user'));
state: {
user: user || null,
},
mutations: {
setUser(state, user) {
state.user = user;
localStorage.setItem('user', JSON.stringify(user));
},
},
第三种方案我没试：使用 Vuex 4 和 Pinia