导入依赖项在一个文件中有效，但在另一个文件中无效

Question

我开始使用 Vuex 进行冒险，并制作一些 auth 模块。找到了一些我试图遵循的示例，但在尝试在商店中使用 axios 时卡住了。我的商店有单独的索引、动作、吸气剂等文件。

动作login在动作中有效store/index.js，但是当我把它放在store/actions.js文件中时，它说axios是未定义的。

商店/index.js

import Vue from 'vue'

import Vuex from 'vuex'

import axios from 'axios'

// import example from './module-example'

Vue.use(Vuex)

/*

 * If not building with SSR mode, you can

 * directly export the Store instantiation

 */

import state from './state'

import getters from './getters'

import mutations from './mutations'

import actions from './actions'

export default function(/* { ssrContext } */) {

  const Store = new Vuex.Store({

    modules: {

      // example

    },

    namespaced: false,

    getters,

    mutations,

    actions,

    state,

    // enable strict mode (adds overhead!)

    // for dev mode only

    strict: process.env.DEV,

  })

  return Store

}

商店/actions.js

export default {

  login({ commit }, user){

    return new Promise((resolve, reject) => {

      commit('auth_request')

      axios({ url: 'http://localhost:3000/login', data: user, method: 'POST' })

        .then(resp => {

          const token = resp.data.token

          const user = resp.data.user

          localStorage.setItem('token', token)

          axios.defaults.headers.common['Authorization'] = token

          commit('auth_success', token, user)

          resolve(resp)

        })

        .catch(err => {

          commit('auth_error')

          localStorage.removeItem('token')

          reject(err)

        })

    })

  }

}

Answer 1

在应用程序入口点（app.js 或类似的）定义 axios globaly：global.axios = require('axios')

Answer 2

import axios from 'axios'那应该只在 actions.js 文件中，因为那是你使用它的地方。是的，您需要在每个文件中单独导入它或使用全局变量。