vue3+vite+pinia+pinia-plugin-persist持久化存储无效

最近刚接触 Pinia在项目中引用相关操作，后续考虑到state的持久化存储问题，也引用了大神的推荐的插件结合，《pinia + pinia-plugin-persist持久化存储》，但怎么试都不生成，主要是我项目中之前引用过Pinia，后面在使用pinia-plugin-persist时又创建了一次pinia ，最后看到了这篇文章Vue3 + Pinia 持久化存储，一语惊出梦中人。

** 若不生效，需检查全局是否注册多个 Pinia （全局搜索createPinia）**

再记录下Vue3+Pinia持久化存储

1.安装插件

npm i pinia-plugin-persist --save

2.store/index.js

import { createPinia } from 'pinia'
// 引入持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
// 使用该插件
store.use(piniaPluginPersist)
// 导出
export default store

3.store/user.js

import { defineStore } from 'pinia'

export const useUserStore = defineStore('storeUser', {
  state () {
    return {
      firstName: '张',
      lastName: '三',
      accessToken: '123456',
    }
  },
  // 使用该插件，开启数据缓存
  persist: {
    enabled: true,
    strategies: [
      { storage: sessionStorage, paths: ['firstName', 'lastName'] }, // firstName 和 lastName字段用sessionStorage存储
      { storage: localStorage, paths: ['accessToken'] }, // accessToken字段用 localstorage存储
    ],
  },
})

4.main.js挂载

import { createApp } from 'vue'
import store from './store' // 引入store
import router from './router' // 引入router
import App from './App.vue'

createApp(App).use(store).use(router).mount('#app')

5.vue页面调用

<script setup>
import { ref, watch } from 'vue'
import { useUserStore} from '@/store/user.js' // 引用 pinia 数据 
const store = useUserStore() // 定义 store 接收

// 修改 accessToken 值
const getIndex = (t) => {
    store.accessToken='456789'// 调用 store actions 中方法 修改 变量值
}
</script>