Vuex 常见的误用

有位同学提问，它在封装 axios 的 http.js 里，想通过 Vuex 取值，getUserToken()，取不到。想知道怎么解决。

他的代码简单写来是这样的：

import axios from 'axios';
import store from '@/store/user';

axios.interceptors.request.use(config => {
  config.headers.Authorization = store.getUserToken();
  return config;
});

很明显，他的目的是把用户的 token 存储到 store 里，然后发起请求的时候自动带进去，用来在服务器监权。上面那段代码大家不用太过关心，因为从出发点来讲它就是错的，是对 Vuex 的一种误用。

Vuex 里面存放的数据应该满足：

1. 要在很多组件里使用
2. 需要响应式

在这个场景下，用 token 存储用户身份，在之后的请求中都发送给服务器，这个功能其实只有 axios 要用，不符合（1）。请求的时候带上即可，页面上不需要直接渲染，不符合（2）。所以这里不应该使用 Vuex，登录后直接把它放在任何全局对象里都可以。