vue 全局状态管理（简单的store模式、使用Pinia）

为什么使用状态管理

多个组件可能会依赖同一个状态时，我们有必要抽取出组件内的共同状态集中统一管理，存放在一个全局单例中，这样任何位置上的组件都可以访问其中的状态或触发动作

简单的store模式

通过自定义一个store模式实现全局的状态管理，实例如下
有两个组件a、b共享store和store2两个状态，我们将其抽离在一个全局单例中，代码如下：

import { reactive } from "vue";
export const store = reactive({count: 0
});
export const store2 = {count: 0
};

a组件中：

<script setup>
import { store, store2 } from "./store.js";
console.log(store, store2);
</script><template><div @click="store.count++">From A: {{ store.count }}</div>
</template>

b组件中：

<script setup>
import { store, store2 } from "./store.js";
console.log(store, store2);
</script><template><div @click="store2.count++">From B: {{ store.count }}</div>
</template>

这样，a、b组件共享了store和store2两个值，在一个组件中对值进行更新，在其他组件中对应的值也会发生改变。

同时关闭a、b组件后，值依然保存，重新加载两个组件，原来的状态值存在。

重新刷新后，store和store2会变为初始值，如果需要做持久化，则需要再使用localstorage等进行存储。

服务器渲染（SSR）

这种简单store模式下，可能会出现跨请求状态污染。

在 SSR 环境下，应用模块通常只在服务器启动时初始化一次。同一个应用模块会在多个服务器请求之间被复用，而我们的单例状态对象也一样。如果我们用单个用户特定的数据对共享的单例状态进行修改，那么这个状态可能会意外地泄露给另一个用户的请求。我们把这种情况称为跨请求状态污染。

pinia

简介

pinia在设计时考虑了ssr，参考这里(服务端渲染 (SSR) | Pinia (vuejs.org))

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Pinia 最初正是为了探索 Vuex 的下一个版本而开发的，整合了vue核心团队关于 Vuex 5 的许多想法。

相比于 Vuex，Pinia 提供了更简洁直接的 API，并提供了组合式风格的 API，最重要的是，在使用 TypeScript 时它提供了更完善的类型推导。

示例

1. 定义一个index.ts文件

import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";// pinia persist
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);export default pinia;

直接通过引入pinia-plugin-persistedstate插件来实现数据的持久化，默认进行localstorage方式持久化存储（pinia只是状态管理库，默认是不会进行数据持久化的）

当然，有很多的存储方法，比如vueuse的 useLocalStorage方法，但是为什么需要用到pinia-plugin-persistedstate呢，官方文档给出了理由：

pinia-plugin-persistedstate 旨在通过一致的 API 为每个人和每个项目中的 Pinia Store 提供持久化存储。如果你希望保存一个完整的 Store，或者需要细粒化配置 storage 和序列化的方式，该插件都为你提供了相应的功能，并且可以在你想要持久化的 Store 上使用相同的配置。

2. 在main.ts中引入

import pinia from "@/stores";
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.use(pinia).mount("#app");

通过app.use实现插件全局注册以及初始化和配置，即使得全局的pinia都使用了piniaPluginPersistedstate插件

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，

3. 定义

在/stores/modules/user文件，可以直接通过defineStore方法进行定义，状态存在state中。

actions中是对state的一些操作和方法，其他组件通过这些方法操作state，保证状态以一种可预测的方式发生变化。

getters中是获取state的一些方法，在这些方法中可以对state做一些预处理和变化再传递给调用的组件

import { defineStore } from "pinia";
import { UserState } from "@/stores/interface";
import piniaPersistConfig from "@/config/piniaPersist";export const useUserStore = defineStore({id: "user",state: (): UserState => ({token: "",userInfo: { name: "cc" }}),getters: {},actions: {// Set TokensetToken(token: string) {this.token = token;},// Set setUserInfosetUserInfo(userInfo: UserState["userInfo"]) {this.userInfo = userInfo;}},persist: piniaPersistConfig("user")
});

persist则是引入了piniaPluginPersistedstate持久化后的一些可配置信息

/config/piniaPersist内容如下：

import { PersistedStateOptions } from "pinia-plugin-persistedstate";/*** @description pinia 持久化参数配置* @param {String} key 存储到持久化的 name* @param {Array} paths 需要持久化的 state name* @return persist* */
const piniaPersistConfig = (key: string, paths?: string[]) => {const persist: PersistedStateOptions = {key,storage: localStorage,// storage: sessionStorage,paths};return persist;
};export default piniaPersistConfig;

paths用于指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态，undefined 或 null 表示持久化整个 state。

更多配置信息可以参考官方文档prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/config.html

4. 使用

import { useUserStore } from "@/stores/modules/user";
const userStore = useUserStore();
router.beforeEach( (to, from, next) => {if (userStore.token) return next(from.fullPath);
}

通过const userStore = useUserStore();引入userStore，全局token来判断当前登录状态