项目中如果配置比较多的话，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

 

})