pinia配置教程（vue3，组合式）-平芜编程栈

pinia官网： https://pinia.vuejs.org/zh/core-concepts/

持久化（Pinia Plugin Persistedstate）：https://praz.codeberg.page/pinia-plugin-persistedstate/zh/guide/

了解pinia

Pinia 是库（工具），Store 是你用 Pinia 创建出来的状态仓库实例。

什么是pinia？

Pinia 是 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 class="u_title"> 用户名：{{ userList.userName } </view>