Question

我有一个lib导入vuex商店

import {store} from "./index"

并且index文件具有常量导出，如

export const store = new Vuex.Store({ ...

在我执行导入的文件中，我想在导入后使用商店中的某些内容，但store未定义。

如果我将商店访问权限包含在像

这样的setTimeout中

setTimeout(()=>{
  // use store normally now..
},0)

它有效。

为什么呢？我猜这不是特定于Vuex的，但我不知道它为什么会发生。

Answer 1

我猜你正在加载无序的东西，或者你的设置有点不对。

我会尝试将商店注入您的Vue实例，然后您可以假设它将在所有子组件中可用。

main.js

import {store} from "./index"

new Vue({ 
  el: '#app',
  store,
  render: h => h(App)
})

现在，在任何子组件中，您都可以通过this.$store

访问您的商店

Answer 2

这可能是循环依赖的情况。循环依赖项在webpack中编译，但是在运行时会出现错误。

假设您有文件A和B，并且dep链类似于A -> B -> A，那么当B尝试导入A时，它仍然没有不能使用export的东西（因为import语句之前不是import语句的语句）。

因此，import default ./A中的B立即返回undefined。

因此，您可以：使B导出一个在调用A后被调用的函数，或者创建一个C和{{ 1}}依赖于此以某种方式解决了这种循环依赖性。