Vue3中使用pinia+pinia-plugin-persist做持久化踩的坑

首先user模块的pinia代码如下：
 

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user',{
  state: () => {
    return {
      token: '',
      userInfo:{}
    }
  },
  actions:{
    setToken( token ){
      this.token = token
      console.log(token)
    },
    setUserInfo( userInfo ){
      this.userInfo = userInfo
    }
  },
  persist: {
    enabled: true, // 开启数据缓存
    strategies: [
      {
        key: 'myuser',
        storage: localStorage // 默认是sessionStorage
      }
    ],
  }
})

组件内使用； 登录页

// 在登录组件内
// pinia
import { useUserStore } from '../store/user'
// 提前获取pinia实例对象
const userStore = useUserStore()

在登录使用操作保存setToken：

// 登录按钮绑定的函数
const userBtn = (formEl) => {
    ...
    userStore.setToken(res.data.accessToken)
    ...
}

登录成功后并没有将token值存入localstorage中

 

解决办法：

把获取的pinia实例对象放在需要操作pinia之前

const userBtn = (formEl) => {
    ...
    const userStore = useUserStore()
    userStore.setToken(res.data.accessToken)
    ...
}

搞定，为什么pinia会抽风，待研究...................................................