时间戳

首页 > 解决方案 > Vuex 模块初始化最佳实践

vue.js - Vuex 模块初始化最佳实践

问题描述

（更新了额外的背景）

我有一个 Vuex 存储模块，它需要在开始时自动加载它的数据，所以它在请求时可用（在这种情况下，它是一个“设置”存储，它在启动时从电子设置中加载数据，但是有很多我可能需要这样的东西的原因）。

现在，我通过在我的 store 模块上设置一个特殊的“init”操作并在“mounted”生命周期钩子上从我的 Main.vue 组件调度它来实现这一点，如下所示：

mounted() {
    this.$store.dispatch('initSettings');
}

我希望的是一种模块可以简单地初始化自己的方式。理想情况下，类似于我的组件上的“已安装”钩子的生命周期钩子，但在 vuex 存储模块中触发。这样我模块的用户就不需要知道他们必须调用“init”以及实例化它。

我搜索了文档并没有找到解决方案，但如果我只是在寻找错误的东西，我希望有人找到了一种优雅的方法来做到这一点。

标签： vue.jsvuexvuex-modules

解决方案

如果您的商店位于单独的文件store/index.js中，则只需导入即可。

import store from '/store';

store.dispatch("stuff")

这是因为 ES6 导入是引用并绑定到运行时数据结构。以下import store from '/store'语句将获得与第一个相同的引用。

require()制作副本。这是一个显着的区别。

推荐阅读