在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来实现状态的持久化存储了。