中国城投建设集团有限公司网站,建设个人网站用什么软件,wordpress主题mx,腾讯云网站备案目录 为什么使用状态管理简单的store模式服务器渲染#xff08;SSR#xff09; pinia简介示例1. 定义一个index.ts文件2. 在main.ts中引入3. 定义4. 使用 为什么使用状态管理
多个组件可能会依赖同一个状态时#xff0c;我们有必要抽取出组件内的共同状态集中统一管理… 目录 为什么使用状态管理简单的store模式服务器渲染SSR pinia简介示例1. 定义一个index.ts文件2. 在main.ts中引入3. 定义4. 使用 为什么使用状态管理
多个组件可能会依赖同一个状态时我们有必要抽取出组件内的共同状态集中统一管理存放在一个全局单例中这样任何位置上的组件都可以访问其中的状态或触发动作
简单的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);
/scripttemplatediv clickstore.countFrom A: {{ store.count }}/div
/templateb组件中
script setup
import { store, store2 } from ./store.js;
console.log(store, store2);
/scripttemplatediv clickstore2.countFrom 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 的许多想法。
相比于 VuexPinia 提供了更简洁直接的 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来判断当前登录状态
