Vue 模式避免循环依赖：在 Vuex 存储和组件中使用模型（类模块）并存储在模型中？答案

【问题标题】：Vue pattern avoiding circular dependency: use of models (class modules) in Vuex store and components and store in models?Vue 模式避免循环依赖：在 Vuex 存储和组件中使用模型（类模块）并存储在模型中？
【发布时间】：2020-10-18 18:27:15
【问题描述】：

谁能指出一个允许的模式：

在 Vuex 商店中使用模型（以类模块的形式）和
在这些模型中使用 Vuex 商店并且
在组件中也使用模型？

我能够达到前 2 点，但是当我尝试将模型导入任何组件时，会出现循环依赖并且应用程序失败。

我目前的模式是这样的：

*** main.js ***

 import { store } from 'pathToStore/store';
 export const vue = new Vue({ 
    el: '#app',
    store,
    render: h => h(App)
 });

*** store.js ***

import vuexModule from './modules/vuexModule'
export const store = new Vuex.Store({
    modules: { vuexModule }
});

*** vuexModule.js ***

import { models } from 'pathToModels/models';
export default {
    state,
    mutations,
    actions,
    getters
};

*** 模型.js ***

import * as importedModels from './modelsAggregator';
export const models = importedModels;

*** modelsAggregator.js ***

export { MyModel} from './MyModel';
export { MyModel2} from './MyModel2';
...

**** MyModel.js ****

import { store } from 'pathToStore/store';
export class MyModel {
    constructor () {};
}

正如我所说，我可以在 store 中使用 models 和在 models 中使用 store 而没有循环依赖（感谢 modelsAggregator 模式），但是能够使用 @987654331 会很方便@也在组件中。能实现吗？

【问题讨论】：

您不能在组件中导入模块。您可以简单地调度操作或提交突变。如果要导入它来获取数据，请使用 mapState 和 mapGetters。
你不能？为什么不？我正在导入一些实用程序功能（如日期格式化程序）并且它可以工作。我不想在该导入中存储任何数据。这一切都由 Vuex 处理。
因为 vuex 模块在 vuex 存储中工作，而不是单独在组件中工作。您可以使用 this.$store.dispatch("moduleNameIfNameSpaced/actionName") 访问所有模块操作。因此，您无需导入任何内容即可使用它们，因为它们已经是您应用的一部分。
我明白这一点。也许我没有足够清楚地解释我想要做什么 - 我希望能够导入不属于 Vuex 的组件类定义，但在 Vuex 中用于操作状态数据（例如. 要存储在 Vuex 中的新对象实例）。

标签： vue.js vuejs2 vuex

【解决方案1】：

看来我找到了一种将模型传递给组件的方法。我只是将 models 对象分配给 vuex 模块的 state 属性。这样我就可以通过this.$store.state.models 访问组件中的模型。这些是对我的问题中描述的模式的更改：

*** store.js ***

import vuexModule from './modules/vuexModule';
import vuexModels from './modules/vuexModels';
export const store = new Vuex.Store({
    modules: { vuexModule, models: vuexModels }
});

*** vuexModels.js ***

import { models } from 'pathToModels/models';
const state = models;
export default { state };

在入口文件中App.vue之前导入store也很重要。

【讨论】：