美文网首页
vue 如何在 .js 文件引入 store

vue 如何在 .js 文件引入 store

作者: liwuwuzhi | 来源:发表于2019-08-10 16:08 被阅读0次

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


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

原因

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

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

所以在vue实例(.vue文件)中我们可以通过 $storethis.$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
  })

相关文章

网友评论

      本文标题:vue 如何在 .js 文件引入 store

      本文链接:https://www.haomeiwen.com/subject/aherjctx.html