起步: uniapp官方的使用pinia流程
在创建完pinia数据后,我们需要使用第三方库进行持久化存储
这里使用的是pinia-plugin-persistedstate: pinia-plugin-persistedstate

安装

  • npm
npm i pinia-plugin-persistedstate
  • pnpm
pnpm i pinia-plugin-persistedstate
  • yarn
yarn i pinia-plugin-persistedstate

加入到 pinia 实例中

import * as Pinia from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = Pinia.createPinia()
pinia.use(piniaPluginPersistedstate)
export function createApp() {
  const app = createSSRApp(App)
	app.use(pinia)
  return {
    app,
	Pinia
  }
}

用法

不可使用 sessionStorage 或者是 localStorage 而是应该使用uniapp封装好的Api
否则运行多端时会报错

import { defineStore } from 'pinia'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('hello pinia')
    return { someState }
  },
  persist:{
  	storage: {
  	  getItem: uni.getStorageSync,
	  setItem: uni.setStorageSync
	}
  },
)
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐