vuejs3 pinia持久化存储

在Vue.js 3中，你可以使用Pinia作为状态管理库，并结合pinia-plugin-persist插件来实现状态的持久化存储。以下是如何设置和使用的示例代码：

首先，安装pinia和pinia-plugin-persist：

npm install pinia pinia-plugin-persist

然后，设置Pinia并添加持久化存储插件：

// store.js
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
 
const pinia = createPinia()
 
// 使用持久化存储插件
pinia.use(piniaPluginPersist)
 
export default pinia

在你的Vue应用中引入并配置Pinia：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import pinia from './store'
 
const app = createApp(App)
app.use(pinia)
app.mount('#app')

创建一个Pinia存储并定义状态：

// stores/counterStore.js
import { defineStore } from 'pinia'
 
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

在组件中使用存储：

<template>
  <div>
    <p>{{ counterStore.count }}</p>
    <button @click="counterStore.increment">Increment</button>
  </div>
</template>
 
<script>
import { useCounterStore } from '@/stores/counterStore'
 
export default {
  setup() {
    const counterStore = useCounterStore()
    return { counterStore }
  },
}
</script>

默认情况下，pinia-plugin-persist会将状态保存在浏览器的localStorage中。你也可以通过插件选项来配置持久化的存储方式和存储键的前缀。

例如，要使用sessionStorage：

// store.js
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
 
const pinia = createPinia()
 
pinia.use(piniaPluginPersist({
  storage: sessionStorage,
  // 可选，为存储的状态指定前缀
  storageKeyPrefix: 'my-app-',
}))
 
export default pinia

这样，你就可以在Vue.js 3应用中使用Pinia结合pinia-plugin-persist来实现状态的持久化存储了。