vue3项目使用pinia时，在使用pinia-plugin-persistedstate插件后，路由守卫的js文件中数据还是无法持久化的问题

vue3项目使用pinia时,浏览器一刷新，存入的数据就会丢失，在大家通常会使用pinia-plugin-persistedstate插件，但是在vue的js文件和路由守卫的js文件中有一些稍不注意就会踩的坑，接下来我就把vue3如何使用pinia，如何使用pinia数据持久化插件以及在js文件中需要注意的内容分享给大家

第一个问题：使用pinia和pinia-plugin-persistedstate插件的使用

使用pinia-plugin-persistedstate插件进行pinia的数据持久化

1.安装依赖

npm i pinia
npm i pinia-plugin-persistedstate -S

 2.main.js文件中引入

import { createPinia } from 'pinia';
import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(persist)
app.use(pinia);
app.mount('#app')

3.src下创建store文件夹和store.js文件

store.js文件中的代码

import { defineStore } from 'pinia';
export const useDataStore = defineStore('data', {
    state: () => {
        return {}
    },
    getters: {},
    actions: {},
    persist: true,
})

注意：上图我的store.js文件中最后一行代码中persist：true    就是数据持久化插件是否开启的属性

4.在vue文件中的使用

引入store.js文件导出的方法，定义一个dataStore就可以直接使用了

5.在js文件中的使用

如在js文件中，比如request.js等js文件中按下图方法使用的话就会报错

import { useDataStore } from '@/store/store.js';
const dataStore = useDataStore()

getActivePinia was called with no active Pinia.

这是因为js文件中使用pinia时还没有挂载，所以需要我们在store.js文件的同级目录新建一个文件pinia.js,以下代码是pinia.js文件中的全部代码

import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

所以然后在js文件中引入pinia.js文件，并添加就可以正常使用不报错了

import store from '@/store/pinia.js'
import { useDataStore } from '@/store/store.js';
const dataStore = useDataStore(store)
console.log(dataStore)

6.在permission.js（处理路由守卫的逻辑）文件中使用

虽然permission.js也是一个js文件，正常情况下直接使用以上第5点在js文件中的方法就可以，但事实上我们使用以上方法时会出现另一个问题：在这个文件中往pinia中存的数据，数据持久化又失效了，在网上查找别的资料会告诉你把定义 const dataStore = useDataStore（store）这段代码放在路由守卫中使用，也就是下图

这样写在路由守卫中确实是正确的解决方案，但是

注意看上图我注释掉的代码！以上截图中虽然是js文件中的代码，但是我的代码中我把第5点提到的js文件中应该引入并注册新建的pinia文件的两行代码注释了，这就是问题所在，经过我实践踩坑，在路由守卫中不需要引入注册pinia文件并注册，只要引入就会导致路由守卫文件中的数据无法持久化，目前原因尚不清楚，请各位大神指教！！！