vuex存取token

Vuex是Vue.js的一个状态管理库，它可以使得在应用程序中共享数据更容易。在实际的开发中，我们经常需要进行跨组件的状态共享，而在许多情况下，我们需要保存在本地存储的用户信息或者一些常用数据。其中的一个常见的应用场景是存储用户的token。

在Vuex中存储和获取token通常是这样实现的：

1.首先，在store中定义一个state对象来存储token，具体实现可以看下面的示例代码：

const store = new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || ''
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      localStorage.setItem('token', token);
    },
    removeToken(state) {
      state.token = '';
      localStorage.removeItem('token');
    }
  }
});

2.上述代码中，我们首先在state中定义了一个token变量来存储获取到的token，然后在mutations中定义了两个操作函数，分别用于设置token和移除token。这里我们使用localStorage来存储token，这样当用户刷新页面时，我们可以从localStorage中获取用户的token。

3.在具体业务逻辑中，我们需要使用mutation操作来设置或者移除token，例如：

this.$store.commit('setToken', 'your_token_value');
this.$store.commit('removeToken');

4.最后，我们可以使用getters来定义获取token的逻辑：

const store = new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || ''
  },
  mutations: {
    setToken(state, token) {
      // ...
    },
    removeToken(state) {
      // ...
    }
  },
  getters: {
    getToken(state) {
      return state.token;
    }
  }
});

5.上述代码中，我们定义了一个getters函数getToken，该函数用于获取当前存储在state中的token值。在具体的组件中，我们可以通过以下方式来获取token：

console.log(this.$store.getters.getToken);

以上就是在Vue.js中使用Vuex存取token的具体实现方法。通过使用Vuex，我们可以更加方便地实现跨组件的状态共享，从而提高开发效率和代码可维护性。