pinia配置教程（vue3，组合式）

pinia官网 https://pinia.vuejs.org/zh/core-concepts/持久化Pinia Plugin Persistedstatehttps://praz.codeberg.page/pinia-plugin-persistedstate/zh/guide/了解piniaPinia 是库工具Store 是你用 Pinia 创建出来的状态仓库实例。什么是piniaPinia 是 Vue 的专属状态管理库它允许你跨组件或页面共享状态。作用多个组件共享同一份数据数据更新后所有用到的地方都能自动更新Store 是什么Store (如 Pinia) 是一个保存状态和业务逻辑的实体它并不与你的组件树绑定。换句话说它承载着全局状态。它有点像一个永远存在的组件每个组件都可以读取和写入它。它有三个概念state、getter 和 action我们可以假设这些概念相当于组件中的data、computed和methods。应用场景一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据例如显示在导航栏中的用户信息以及需要通过页面保存的数据例如一个非常复杂的多步骤表单。安装pinia及持久化插件uni‑app (Vue3)HBuilderX 创建的项目框架层内置 pinia可不用安装pinia。安装pinia安装pinia yarn add pinia # 或者使用 npm npm install pinia 持久化插件安装 # pnpm pnpm add pinia-plugin-persistedstate # npm npm i pinia-plugin-persistedstate # yarn yarn add pinia-plugin-persistedstate创建pinia实例main.js import { createSSRApp } from vue import App from ./App.vue import { createPinia } from pinia import piniaPluginPersistedstate from pinia-plugin-persistedstate export function createApp() { // 创建vue实例 const app createSSRApp(App) // 创建pinia实例 const pinia createPinia() // 注册持久化插件 pinia.use(piniaPluginPersistedstate) // 注册pinia为vue插件 app.use(pinia) // 返回实例 return { app, pinia } }定义store(组合式在Setup Store中ref()就是state属性 state是 store 的数据 (data)computed()就是getters getters是 store 的计算属性 (computed)function()就是actions actions则是方法 (methods)stores\user.js import { defineStore } from pinia import { ref, computed } from vue const initUserInfo { userName: , sex: 0, token: , avatar: , Identity: {} } // 命名最好含有 store 的名字且以 use 开头以 Store 结尾 // 第一个参数是你的应用中 Store 的唯一 ID。 // 第二个参数可接受两类值Setup 函数或 Option 对象。 // 初始默认用户信息对象用于初始化和重置 export const useUserStore defineStore(user, () { // 初始化用户信息 const user ref({ ...initUserInfo }) // 是否登录 const isLogin computed(() !!user.value.token) // 更新用户信息 const login (partialInfo) { const keys Object.keys(partialInfo) keys.forEach((key) { const val partialInfo[key] if (val ! undefined) { user.value[key] val } }) } // 退出登录恢复初始模板 function logout() { user.value { ...initUserInfo } } return { user, isLogin, login, logout } }, { // 持久化 persist: { // 用于引用存储中存储的反序列化数据的 Key key: userStore, // 将数据保存到 Storage 中必须有setItem和getItem storage: { setItem(key, storeStateStr) { // storeStateStr是插件传过来完整state字符串 {user:{...}} const storeState JSON.parse(storeStateStr) // 只把user内部对象存进去抛弃外层 {user: } uni.setStorageSync(key, JSON.stringify(storeState.user)) }, getItem(key) { const raw uni.getStorageSync(key) if(!raw) return null // 读出来之后手动包回 { user: ... }适配pinia state结构 const userObj JSON.parse(raw) return JSON.stringify({ user: userObj }) }, removeItem(key) { uni.removeStorageSync(key) } } } } )模版使用登录时存储用户信息login.vue script setup import { useUserStore } from /stores/user const userList { userName: admin, sex: 1, token: 1122asfafdsdas111, avatar: https://ynyb.com/image/666/24/07/vuw6ItuWrsHfzeaOV9kwrNoJZaHiQ4Ix.png Identity: {} } const userStore useUserStore() userStore.login(userList) /script使用存储的用户信息min/index.vue script setup import { computed , ref } from vue // 定义store实例 const userStore useUserStore() // 用户信息列表 const userList computed(() userStore.userInfo) // 是否登录 const isLogin computed(() userStore.isLogin) // 退出登录 const handToLogout () { userStore.logout() uni.reLaunch({ url: /pages/login)} } /script view classu_title 用户名{{ userList.userName } /view