vue 如何在 .js 文件引入 store

項目中如果配置比較多的話,store的使用可能不只是在store文件夾里面的文件。
比如下面項目結(jié)構(gòu):


例如希望在api/index.js 文件使用store,改怎么導(dǎo)入呢?


原因

其實在main.js我們是導(dǎo)入過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 文件中一樣直接導(dǎo)入 store(router 的使用也是同樣的方法), 如下:
api/index.js:

// 導(dǎo)入
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
  })
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容