vue3+pinia定义token，定义setToken和getToken

在 Vue 3 + Pinia 中，可以使用 Pinia 来定义并管理全局状态。首先，需要创建一个 `store` 实例，并定义 `state` 和 `mutations`：

import { defineStore } from 'pinia';

interface AuthState {
  token: string | null;
}

export const useAuthStore = defineStore({
  id: 'auth',
  state: (): AuthState => ({
    token: null,
  }),
  mutations: {
    setToken(state: AuthState, token: string | null) {
      state.token = token;
    },
  },
});

在上面的代码中，我们定义了一个名为 `useAuthStore` 的 store，并指定了它的 `id` 为 `auth`。`state` 中定义了一个名为 `token` 的属性，初始值为 `null`。`mutations` 中定义了一个名为 `setToken` 的 mutation，用于设置 `token` 的值。

接下来，我们可以在 store 中定义一个 `getters`，用于获取 `token` 的值：

import { defineStore } from 'pinia';

interface AuthState {
  token: string | null;
}

export const useAuthStore = defineStore({
  id: 'auth',
  state: (): AuthState => ({
    token: null,
  }),
  mutations: {
    setToken(state: AuthState, token: string | null) {
      state.token = token;
    },
  },
  getters: {
    getToken(state: AuthState) {
      return state.token;
    },
  },
});

现在，我们在 store 中定义了一个名为 `getToken` 的 getter，用于获取 `token` 的值。在组件中，我们可以使用 `useAuthStore` 的 `useStore` 辅助函数来创建一个 store 实例：

import { useAuthStore } from '@/store';

export default {
  setup() {
    const authStore = useAuthStore();

    const setToken = (token: string | null) => {
      authStore.setToken(token);
    };

    const getToken = () => {
      return authStore.getToken;
    };

    return {
      setToken,
      getToken,
    };
  },
};

这样，在组件中就可以通过 `setToken` 和 `getToken` 方法来设置和获取 `token` 的值了。例如，在登录成功后设置 `token` 的值：

import { useAuthStore } from '@/store';

export default {
  setup() {
    const authStore = useAuthStore();

    const handleLogin = async () => {
      // 发送登录请求并获取 token
      const token = 'xxxxx';
      authStore.setToken(token);
    };

    return {
      handleLogin,
    };
  },
};

在其他组件中，我们也可以使用 `getToken` 方法来获取 `token` 的值：

import { useAuthStore } from '@/store';

export default {
  setup() {
    const authStore = useAuthStore();

    const token = authStore.getToken;

    return {
      token,
    };
  },
};

这样，就可以在 Vue 3 + Pinia 应用中定义和管理 `token` 了。