Unable to persist

[Alickx]

// userStore.ts
import {defineStore} from "pinia";
import {IUser} from "../api/type/IUser";
import {ref} from "vue";

export const useUserStore = defineStore(
  "user",
  () => {
    const user = ref<IUser>({
      id: null,
      nickName: null,
      avatarUrl: null,
    });
    const token = ref<string>("");
    const refreshToken = ref<string>("");
    const isLoggedIn = ref<boolean>(false);

    const setUser = (data: IUser) => {
      user.value = data;
    };

    const setToken = (data: string) => {
      token.value = data;
    };

    const setRefreshToken = (data: string) => {
      refreshToken.value = data;
    };

    const setIsLoggedIn = (data: boolean) => {
      isLoggedIn.value = data;
    };
    return {
      user,
      token,
      refreshToken,
      isLoggedIn,
      setUser,
      setToken,
      setRefreshToken,
      setIsLoggedIn,
    };
  }, {
    persist: {
      key: 'user',
      storage: window.localStorage,
      serializer: {
        serialize: JSON.stringify,
        deserialize: JSON.parse,
      },
      beforeRestore: context => {
        console.log('Before hydration...')
      },
      afterRestore: context => {
        console.log('After hydration...')
      },
    }
  }
);

Dependent Versions

specifiers:
  '@vitejs/plugin-vue': ^2.3.0
  autoprefixer: ^10.4.4
  axios: ^0.26.1
  install: ^0.13.0
  naive-ui: ^2.27.0
  nprogress: ^0.2.0
  pinia: ^2.0.0-rc.10
  pinia-plugin-persistedstate: ^1.5.1
  postcss: ^8.4.12
  protobufjs: ^6.11.2
  tailwindcss: ^3.0.23
  typescript: ^4.5.4
  unplugin-vue-components: ^0.18.5
  vite: ^2.9.0
  vue: ^3.2.25
  vue-router: ^4.0.14
  vue-tsc: ^0.29.8

dependencies:
  axios: 0.26.1
  install: 0.13.0
  nprogress: 0.2.0
  pinia: 2.0.13_typescript@4.6.3+vue@3.2.31
  pinia-plugin-persistedstate: 1.5.1_pinia@2.0.13
  vue: 3.2.31
  vue-router: 4.0.14_vue@3.2.31

devDependencies:
  '@vitejs/plugin-vue': 2.3.1_vite@2.9.1+vue@3.2.31
  autoprefixer: 10.4.4_postcss@8.4.12
  naive-ui: 2.27.0_vue@3.2.31
  postcss: 8.4.12
  protobufjs: 6.11.2
  tailwindcss: 3.0.23_autoprefixer@10.4.4
  typescript: 4.6.3
  unplugin-vue-components: 0.18.5_vite@2.9.1+vue@3.2.31
  vite: 2.9.1
  vue-tsc: 0.29.8_typescript@4.6.3

code:

const loginHandler = async () => {
  const res = await UserService.login(loginModel.value)
  if (res.code === 200) {
    userStore.setToken(res.data.accessToken);
    userStore.setUser(res.data.user);
    userStore.setRefreshToken(res.data.refreshToken);
    userStore.setIsLoggedIn(true);
    message.success('login success');
  } else {
    message.error(res.message);
    loginModel.value.password = '';
  }
};

When I save data to pinia, the plugin does not persist

[k90zz]

hello, could you tell me how did you solve this issue? It seems this plugin doesn't work with pinia setup store.