Vuex 缓存token

在 Vuex 中缓存 token，你可以使用 Vuex 的 state 来存储 token，并使用 Vuex 的 mutation 来更新 token。当用户登录成功时，将 token 存储在 state 中，然后在每个请求中将 token 添加到请求头中，以便服务器验证身份。

以下是一个简单的示例：

// 定义 state，用来存储 token
const state = {
  token: ''
}

// 定义 mutations，用来更新 state 中的 token
const mutations = {
  SET_TOKEN(state, token) {
    state.token = token
  }
}

// 定义 actions，用来触发 mutations 更新 token
const actions = {
  setToken({ commit }, token) {
    commit('SET_TOKEN', token)
  }
}

// 在组件中使用
<template>
  <div>
    <button @click="login">登录</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['setToken']),
    login() {
      // 发送登录请求，并获取 token
      const token = 'token'
      // 将 token 存储在 state 中
      this.setToken(token)
    }
  }
}
</script>

在每个请求中添加 token 的方法，可以在 Axios 中使用拦截器来实现：

import axios from 'axios'

axios.interceptors.request.use(
  config => {
    // 在请求头中添加 token
    const token = store.state.token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

以上示例仅为简单示例，实际使用中可能需要根据具体情况进行调整。