vue3 详细配置 pinia，以及持久化处理

安装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: {
      // 调整为兼容多端的API
      storage: {
        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); // 使用 store

  setConfig({
    // 修改$u.config对象的属性
    config: {
      // 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
      unit: 'rpx'
    },
    // 修改$u.props对象的属性
    props: {
      // 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30
      radio: {
        size: 16
      }
      // 其他组件属性配置
    }
  })

  return {
    app,
    pinia
  }
}
// #endif