目录
- 为什么使用状态管理
- 简单的store模式
- 服务器渲染（SSR）
- pinia
- 简介
- 示例
- 1. 定义一个index.ts文件
- 2. 在main.ts中引入
- 3. 定义
- 4. 使用
- storeToRefs
为什么使用状态管理
多个组件可能会依赖同一个状态时，我们有必要抽取出组件内的共同状态集中统一管理，存放在一个全局单例中，这样任何位置上的组件都可以访问其中的状态或触发动作
简单的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 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来判断当前登录状态
storeToRefs
解构赋值后的变量会丧失响应性，使用storeToRefs方法可以使变量重新获得响应性。
注意这里的变量应该指的是基本数据类型，如果是对象，则会保留响应性。
例如：定义如下store
export const useUserStore = defineStore({id: "user",state: (): UserState => ({token: "",userInfo: { name: "Geeker" }}),getters: {getUserInfo(state) {return state.userInfo;}},actions: {// Set TokensetToken(token: string) {this.token = token;},// Set setUserInfosetUserInfo(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都会同时发生改变。
