Question

我可能看不到明显的事情，但是几个小时后我还没有看到它。

问题：当我将Vuex存储导入非组件文件（api服务）时，一个模块正确加载而另一个模块仅按名称加载，否则为空。

// store.js
import * as collections from "./modules/collections";
import * as auth from "./modules/auth";

export default new Vuex.Store({
  modules: {
    auth,
    collections
  }
});

这两个模块几乎完全相同。两者都有

export const getters = {}
export const actions = {}
export const mutations = {}
export const state = {}

现在，在其他非组件文件中我不要包含商店时，我的vue商店看起来像这样：

{"auth":{"authenticated":false,"authToken":"123","loginPending":false,"loginError":{}},"collections":{"collectionsPending":false,"collectionsError":null,"collections":[]}}

现在当我导入商店以便在我的服务中使用它时：

import store from '../store'
// NO OTHER MENTIONS OF STORE, ONLY IMPORTING

突然间我的auth模块只是“空”

{"auth":{},"collections":{"collectionsPending":false,"collectionsError":null,"collections":[]}}

它与模块加载有关。

通过添加console.log语句加载顺序：

没有导入：
```
INIT AUTH
INIT collections
INIT store
```

使用导入：

INIT collections
INIT store
IMPORT STATEMENT -- INTO SERVICE
INIT AUTH

我正在使用Vue Webpack Boilerplate

Answer 1

叹了一口气，对不起。确实是循环依赖。如果我这样做的话，我会发出警告，但事实并非如此。

感谢Emile Bergeron。

直接导入商店时，Vuex商店模块未按正确顺序加载

1 个答案: