前言
内容有帮助的可以直接复制代码
pinia
简介
vue3发布以后，pinia也随着诞生， 代替 Vuex 做状态管理，比较直观的好处就是不用在区分 同步调用 和 异步调用 了，store 的修改动作 action 作为常规函数调用，而不是使用 dispatch 方法或者是 commit 去调用，当然最重要的还是对 TS 支持比较友好
uniapp 中使用
在uniapp中使用pinia与我们平时使用 npm 安装插件的方式略有不同
使用 HBuilder X 不需要手动安装，直接使用即可
直接在 main.js 引入相关代码
import { createSSRApp } from 'vue'; import * as Pinia from 'pinia'; export function createApp() { const app = createSSRApp(App); app.use(Pinia.createPinia()); return { app, Pinia, // 此处必须将 Pinia 返回 }; } 复制代码
这样我们就可以全局使用pinia了
添加管理模块
这里我们以一个登录模块为例
在根目录创建文件store/account.js定义好相关属性
import { defineStore } from 'pinia' export const useAccountStore = defineStore('account', { state: () => { return { account: '测试' } }, actions: { login(account) { this.account = account } } }) 复制代码
然后就可以在页面中使用了
import { useAccountStore } from '@/stores/account.js' const account = useAccountStore() // 调用 actions account.login('测试123') 复制代码
这里可以通过属性访问的方式调用方法，也可以将方法解构出来，具体看使用习惯即可
数据持久化
使用状态管理时，有时我们会有这样的需求，需要将状态管理的数据存储到本地缓存中，在页面刷新，或者下一次访问时依然生效，uniapp提供了uni.setStorageSync()方法支持各个平台将数据存在本地，单如果需要时每一个单独加不便于管理，这个时候可以使用持久化的缓存插件，会自动把pinia配置的数据存到本地
使用pinia-plugin-unistorage
- 插件市场导入插件
pinia-plugin-unistorage - DCloud 插件市场
- 配置
main.js
import { createUnistorage } from './uni_modules/pinia-plugin-unistorage' export function createApp() { const app = createSSRApp(App) // 状态管理 const store = Pinia.createPinia() // 持久化 store.use(createUnistorage()) app.use(store) return { app, Pinia } } 复制代码
- 在需要持久化缓存的状态配置好开关，以
account.js为例
import { defineStore } from 'pinia' export const useAccountStore = defineStore('account', { unistorage: true, // 是否持久化 state: () => { return { account: '测试' } }, actions: { login(account) { this.account = account } } }) 复制代码
配置好unistorage属性后，Pinia就会自动把相关数据存到缓存里啦
