Vuex 模块初始化最佳实践
Vuex Module Initialization Best Practice
(更新了额外的背景)
我有一个 Vuex 存储模块,需要在开始时自动加载它的数据,所以它在请求时可用(在这种情况下,它是一个 'settings' 存储,从 electron-settings 加载数据启动,但有很多原因我可能需要这样的东西)。
现在我通过在我的商店模块上设置一个特殊的 'init' 操作并从我的 Main.vue 组件在 'mounted' 生命周期挂钩上调度它来实现这一点,就像这样:
mounted() {
this.$store.dispatch('initSettings');
}
我所希望的是模块可以简单地自我初始化的方式。理想情况下,生命周期钩子类似于我组件上的 'mounted' 钩子,但在 vuex 存储模块中触发。这样我的模块的用户就不需要知道他们必须调用 'init' 以及实例化它。
我已经搜索了文档,但还没有找到解决方案,但如果我只是在寻找错误的东西,我希望有人找到了一种优雅的方法来做到这一点.
我需要类似的东西,我的解决方案是 运行 是在加载文档时:
var app_store = new Vuex.Store({
state: state,
getters: getters,
mutations: mutations,
actions: actions,
});
$(document).ready(function()
{
app_store.dispatch("initSettings",null);
});
如果您的商店在单独的文件中 store/index.js
,您可以直接导入它。
import store from '/store';
store.dispatch("stuff")
这是因为 ES6 导入是引用并绑定到运行时数据结构。以下 import store from '/store'
语句将获得与第一个相同的引用。
require()
复制。这是一个显着的区别。
(更新了额外的背景)
我有一个 Vuex 存储模块,需要在开始时自动加载它的数据,所以它在请求时可用(在这种情况下,它是一个 'settings' 存储,从 electron-settings 加载数据启动,但有很多原因我可能需要这样的东西)。
现在我通过在我的商店模块上设置一个特殊的 'init' 操作并从我的 Main.vue 组件在 'mounted' 生命周期挂钩上调度它来实现这一点,就像这样:
mounted() {
this.$store.dispatch('initSettings');
}
我所希望的是模块可以简单地自我初始化的方式。理想情况下,生命周期钩子类似于我组件上的 'mounted' 钩子,但在 vuex 存储模块中触发。这样我的模块的用户就不需要知道他们必须调用 'init' 以及实例化它。
我已经搜索了文档,但还没有找到解决方案,但如果我只是在寻找错误的东西,我希望有人找到了一种优雅的方法来做到这一点.
我需要类似的东西,我的解决方案是 运行 是在加载文档时:
var app_store = new Vuex.Store({
state: state,
getters: getters,
mutations: mutations,
actions: actions,
});
$(document).ready(function()
{
app_store.dispatch("initSettings",null);
});
如果您的商店在单独的文件中 store/index.js
,您可以直接导入它。
import store from '/store';
store.dispatch("stuff")
这是因为 ES6 导入是引用并绑定到运行时数据结构。以下 import store from '/store'
语句将获得与第一个相同的引用。
require()
复制。这是一个显着的区别。