错误信息 Uncaught (in promise) TypeError: extender is not a function

1. 持久化插件配置问题

你可能在 Pinia 配置中错误地使用了持久化插件，导致 extender 参数不是有效的函数。

解决方法

确保 Pinia 的持久化插件正确安装和注册。以下是正确的使用示例：

安装持久化插件：

确认你使用的是 pinia-plugin-persistedstate，运行以下命令：

npm install pinia-plugin-persistedstate

在 main.js 中正确配置：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

// 注册持久化插件
pinia.use(piniaPluginPersistedstate);

app.use(pinia);
app.mount('#app');

2. token Store 的定义问题

你的 Login.vue 使用了 useTokenStore，但错误可能来源于 token.js 中的 Store 定义。

检查你的 Store 定义

确保 token Store 的定义符合以下格式：

示例：

// stores/token.js
import { defineStore } from 'pinia';

export const useTokenStore = defineStore('token', {
  state: () => ({
    token: null,
  }),
  actions: {
    setToken(newToken) {
      this.token = newToken;
    },
  },
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'token-store',
        storage: localStorage, // 或 sessionStorage
      },
    ],
  },
});

3. 使用顺序错误

确保 Pinia 的实例和 Router 的实例注册顺序正确。

正确注册顺序：

Pinia 应在 Vue Router 注册之前：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';
import router from './router';

const app = createApp(App);

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

app.use(pinia);
app.use(router);
app.mount('#app');

4. Vue 表单验证规则错误

你的 rules 中使用了 Required，但它应为小写的 required。

修正验证规则

更改你的 rules 定义：

const rules = {
  username: [
    { required: true, message: "用户名不能为空", trigger: "blur" },
    { min: 5, max: 15, message: "长度为5~15的非空字符", trigger: "blur" }
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 5, max: 15, message: "长度为5~15的非空字符", trigger: "blur" }
  ],
  repassword: [
    {
      validator: (rule, value, callback) => {
        if (value !== registerData.value.password) {
          callback(new Error("两次密码不一致"));
        } else if (value === "") {
          callback(new Error("密码不能为空"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

5. 登录逻辑检查

在 login 方法中，你调用了 userLoginService 并直接将返回值中的 token 设置为 store 的 token，但没有检查 result 的格式。如果 result.data.token 不存在，可能导致未捕获的错误。

修复 login 方法：

const login = async () => {
  try {
    let result = await userLoginService(registerData.value);
    if (result && result.code === 0) {
      tokenStore.setToken(result.data.token);
      ElMessage.success(result.msg || "登录成功");
      router.push('/');
    } else {
      ElMessage.error(result.msg || "登录失败");
    }
  } catch (error) {
    ElMessage.error("登录请求失败，请检查网络或接口！");
  }
};

6. 调试问题

如果问题仍然存在，可以尝试以下方法：

1. 打印错误上下文： 在 pinia.mjs:1674 附近加一层 console.log 打印 extender 值，确认它为何不是函数。
2. 检查插件文档： 核对 pinia-plugin-persistedstate 的版本和文档，确认插件的用法是否有变化。
3. 清除缓存并重装依赖：

   rm -rf node_modules package-lock.json
   npm cache clean --force
   npm install