install

官档 (opens new window)

yarn add pinia-plugin-persist

setting

index.ts

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()

store.use(piniaPluginPersist)

export default store

Typescript

{
  "compilerOptions": {
    "types": [
      "pinia-plugin-persist"
    ]
  },
}

main.ts

import { createSSRApp } from 'vue'
// import { createPinia } from 'pinia'
import App from './App.vue'
import mixins from '@/utils/mixins'
import store from '@/stores'

import '../tailwind.css'

export function createApp() {
  const app = createSSRApp(App)
  app.use(store)
  app.mixin(mixins)
  // app.use(createPinia()) // 取消全局，放置到 store 中
  return {
    app
  }
}

Use

定义模块

// ts or js
import { defineStore } from 'pinia'

export const userStore = defineStore('User', { // User 为 Id ,必须是唯一的
  state: () => {
    return {
      age: 18,
      name: 'sdsd'
    }
  },
  getters: {

  },
  actions: {

  },
  // 开启 pinia 持久存储
  persist: {
    enabled: true, // 开启存储
    strategies: [
      {
        // key: 'User', // 指明 key, 不设置时，默认为 User ,即 defineStore Id
        storage: localStorage, // 存储方式 默认为 session
        paths: ['name', 'age'] // 指定 state里面存储的内容,未指定的将不存储
      }
    ]
  }
})

use in vue

// 在任意组件中使用
<template>
  <view class="content">
    <input class="border border-blue-500" v-model="age" type="text" />
    <input class="border border-green-500" v-model="name" type="text" />
    <view></view>
  </view>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia' // 响应式数据
import { bbbStore } from '@/stores/bbb' // 单独引用
const user = bbbStore()
let { age, name } = storeToRefs(user)

</script>