前端拿到token，如何将token存储到vuex中

要将 token 存储到 Vuex 中，你可以按照以下步骤操作：

1. 创建 Vuex Store：首先，确保你的 Vue 项目已经配置了 Vuex。如果还没有，你需要创建一个 Vuex store。在你的项目中的 store 目录下创建一个 index.js 文件或者你惯用的命名方式。

2. 定义 State：在 Vuex store 中定义一个 state，用于存储 token。例如

// store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: null,
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
    clearToken(state) {
      state.token = null;
    },
  },
  actions: {
    // 可以在这里定义异步操作，例如从后端获取 token
  },
});

　　

3. 调用 Mutation 存储 Token：在需要存储 token 的地方，调用 Vuex store 中的 mutation 来更新 token。例如，在某个组件中：

// SomeComponent.vue

<template>
  <!-- your component template -->
</template>

<script>
export default {
  methods: {
    storeToken(token) {
      this.$store.commit('setToken', token);
    },
  },
};
</script>

　　

4. 使用 Getter 获取 Token：如果需要在组件中访问 token，你可以定义一个 getter 来获取它。例如：

// store/index.js

export default new Vuex.Store({
  // ...
  getters: {
    getToken(state) {
      return state.token;
    },
  },
});

　　然后在组件中通过 mapGetters 或者 $store.getters 来获取 token。

5. 清除 Token：如果需要清除 token，例如用户注销或者 token 过期，你可以定义一个 mutation 来清除 token：

// store/index.js

export default new Vuex.Store({
  // ...
  mutations: {
    // ...
    clearToken(state) {
      state.token = null;
    },
  },
});

　　

然后在需要清除 token 的地方调用该 mutation。

这样，你就可以在 Vue 项目中使用 Vuex 来管理 token 了。这种方式有助于统一管理应用程序的状态，并且使得状态的变更和访问更加可控。