安装pinia
pnpm install pinia
pnpm install pinia-plugin-persistedstate
使用pinia
-
根目录下创建store文件夹，新家moudules文件夹和index.ts文件，如图：
-
index.ts 文件
// store/index.ts
// 仓库大仓库
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";// 引入模块仓库
import { useUserInfoStore } from './moudules/userInfo'// 创建大仓库
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);export {pinia,useUserInfoStore
}- userInfo.ts 文件
import { defineStore } from 'pinia';export const useUserInfoStore = defineStore('useUserInfoStore',() => {const someState = ref('你好 pinia')return { someState,}},{// 配置持久化persist: {// 调整为兼容多端的APIstorage: {setItem(key, value) {uni.setStorageSync(key, value) },getItem(key) {return uni.getStorageSync(key) },},},},
);
- main.ts 文件
// #ifdef VUE3
import { createSSRApp } from 'vue'
import App from "./App.vue";
import uviewPlus, { setConfig } from 'uview-plus';
// import { createPinia } from 'pinia'
import { pinia } from './store';export function createApp() {const app = createSSRApp(App)app.use(uviewPlus)app.use(pinia);// app.use(useStore); // 使用 storesetConfig({// 修改$u.config对象的属性config: {// 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'unit: 'rpx'},// 修改$u.props对象的属性props: {// 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30radio: {size: 16}// 其他组件属性配置}})return {app,pinia}
}
// #endif
