const mutations = { changeToken(state, token) { state.token = token // 并且把token存入缓存 setToken(token) }, setUserInfo(state, userInfo) { state.userInfo = userInfo }, getKey(state, num) { state.key = num }, getToken(state, val) { state.token = val }, removeToken(state) { // 清除state中的token state.token = null // 同时也要清除缓存中的token removeToken() } }

这段代码是在 Vuex 中定义了一些 mutation，用于修改 state 中的数据。其中，changeToken 用于修改 token，并将其存入缓存；setUserInfo 用于设置用户信息；getKey 用于设置 key；getToken 用于设置 token；removeToken 用于清除 token 并从缓存中移除。在使用这些 mutation 时，需要通过 commit 方法来触发对应的 mutation。例如：`this.$store.commit('changeToken', token)`。

相关问题

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)
  }
)

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

actions: { // 登录 Login({ commit }, userInfo) { const username = userInfo.username.trim() const password = userInfo.password const code = userInfo.code const uuid = userInfo.uuid return new Promise((resolve, reject) => { login(username, password, code, uuid).then(res => { setToken(res.token) commit('SET_TOKEN', res.token) resolve() }).catch(error => { reject(error) }) }) },

这是一个基于 Vuex 状态管理库的登录模块的 actions 部分的代码。在 Vuex 中，actions 用于封装异步操作和业务逻辑，可以通过 commit 触发 mutations 来修改 state 中的数据。在该代码中，Login 方法接收一个包含用户登录信息的对象 userInfo 和 Vuex 的 commit 方法。在该方法中，首先对用户名和密码进行了处理，去除了首尾空格。然后，该方法返回了一个 Promise 对象，用于异步处理登录操作。在该 Promise 中，调用了 login 方法，该方法接收四个参数，分别为用户名、密码、验证码和 UUID。login 方法返回了一个 Promise 对象，用于处理登录成功或失败的情况。如果登录成功，则通过 setToken 方法将返回的 token 存储到浏览器的 localStorage 中，并通过 commit 方法触发 SET_TOKEN mutations，将 token 存储到 Vuex 的 state 中。最后，该 Promise 对象调用 resolve 方法，表示登录操作成功。如果登录失败，则调用 reject 方法，表示登录操作失败。整个 Login 方法的作用是将用户登录信息提交到服务器进行验证，并将服务器返回的 token 存储到浏览器和 Vuex 的 state 中，以便其他模块调用。