项目中如果配置比较多的话，store的使用可能不只是在store文件夹里面的文件。

比如下面项目结构：

例如希望在api/index.js 文件使用store,改怎么导入呢？

原因

其实在main.js我们是导入过store的，并挂在到vue实例上，如下：

import store from './store'

new Vue({

el: '#app',

router,

store,

components: { App },

template: ''

})

所以在vue实例(.vue文件)中我们可以通过 $store 或 this.$store 来找到，但是外部的 .js 不在vue实例 this 下，所以直接用 console.log($store) 是 undefined。

解决方法

像在main.js 文件中一样直接导入 store(router 的使用也是同样的方法)， 如下：

api/index.js:

// 导入

import axios from 'axios'

import store from '../store'

import router from '../router'

// request 请求拦截

axios.interceptors.request.use(

config => {

if (router.currentRoute.meta.requireAuth) {

config.headers['Authorization'] = 'Bearer ' + store.state.token

}

return config

})