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插件

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 Token
    setToken(token: string) {
      this.token = token;
    },
    // Set setUserInfo
    setUserInfo(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来判断当前登录状态

storeToRefs

解构赋值后的变量会丧失响应性，使用storeToRefs方法可以使变量重新获得响应性。
注意这里的变量应该指的是基本数据类型，如果是对象，则会保留响应性。

例如：定义如下store

export const useUserStore = defineStore({
  id: "user",
  state: (): UserState => ({
    token: "",
    userInfo: { name: "Geeker" }
  }),
  getters: {
    getUserInfo(state) {
      return state.userInfo;
    }
  },
  actions: {
    // Set Token
    setToken(token: string) {
      this.token = token;
    },
    // Set setUserInfo
    setUserInfo(userInfo: UserState["userInfo"]) {
      this.userInfo = userInfo;
    },
    setName(name: string) {
      this.userInfo.name = name;
    }
  },
  persist: piniaPersistConfig("user")
});

在其他组件中引入

<script setup lang="ts">
import { computed } from "vue";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/stores/modules/user";

const userStore = useUserStore();
const username = computed(() => userStore.userInfo.name);
const { userInfo } = userStore;
console.log(userInfo);

const { token } = storeToRefs(userStore);
console.log(token);
const changeToken = () => {
  userStore.setToken("123" + Math.random());
  console.log(token);
};
</script>

<template>
 <span class="username">{{ username }}</span>
 <span @click="userStore.setName('456')">{{ userStore.getUserInfo.name }}</span>
 <span @click="userInfo.name = 'zcc'" class="username">{{ userInfo.name }}</span>
 <span @click="changeToken">{{ token }}</span>
</template>

结果如图，此时token和userInfo都是具有响应性的，使用changeToken函数后store中的token和解构的token都会发生变化

但是如果将storeToRefs去掉

<script setup lang="ts">
import { computed } from "vue";

import { useUserStore } from "@/stores/modules/user";

const userStore = useUserStore();
const username = computed(() => userStore.userInfo.name);
const { userInfo } = userStore;
console.log(userInfo);

const { token } = userStore;
console.log(token);
const changeToken = () => {
  userStore.setToken("123" + Math.random());
    console.log("失去响应的", token);
  console.log("userStore.token", userStore.token);
};
</script>

结果如图，token将丧失响应性

此时调用changeToken函数，只有userStore.token会变化，解构的token不会变化

但是对于userInfo来说，无论是修改store中的name——userStore.setName(‘456’)",还是直接修改解构的userInfo——userInfo.name = ‘zcc’,上述代码中的三项不同方式获取的name都会同时发生改变。