为什么 vuex 商店只有在 setTimeout 之后才可用？答案

【问题标题】：why is vuex store only available after setTimeout?为什么 vuex 商店只有在 setTimeout 之后才可用？
【发布时间】：2018-03-12 15:06:21
【问题描述】：

我有一个导入 vuex 商店的库

import {store} from "./index"

index 文件有一个恒定的导出，例如

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

在我正在导入的文件中，我想在导入后使用商店中的某些东西，但 store 未定义。

如果我将我的商店访问权限包装在一个 setTimeout 中，例如

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

它有效。

为什么？我猜这不是 Vuex 特有的，但我不知道为什么会这样。

【问题讨论】：

【解决方案1】：

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

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

所以import default ./A 从B 立即返回undefined。

所以要么：使B 导出一个函数，该函数在调用A 导出之后以某种方式调用，或者创建一个模块C，A 和B 都依赖于它以某种方式修复了这个循环依赖。

【讨论】：

【解决方案2】：

我猜你加载的东西有问题，或者你的设置有点不对。

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

main.js

import {store} from "./index"

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

现在在任何子组件中，您都可以通过 this.$store 访问您的商店

【讨论】：