时间戳

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

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

问题描述

任何人都可以指出一个允许的模式：

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

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

我当前的模式如下所示：

*** 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;

*** 模型聚合器.js ***

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

**** MyModel.js ****

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

正如我所说，我可以在没有循环依赖的情况下使用modelsinstore和storein （感谢 modelsAggregator 模式），但也可以在组件models中使用它会很方便。models可以实现吗？

标签： vue.jsvuejs2vuex

解决方案

似乎我找到了一种将模型传递给组件的方法。我只是将models对象分配state给 vuex 模块的属性。这样我就可以通过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 };

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

推荐阅读