Vuex模块初始化最佳实践

时间:2018-05-30 19:54:43

标签: vue.js vuex vuex-modules

(使用其他背景更新)

我有一个Vuex商店模块需要在开始时自动加载其数据,因此在需要时它可用(在这种情况下,它是一个'设置'商店,在启动时从电子设置加载数据,但那里有很多理由我可能需要这样的东西。)

现在我通过在我的商店模块上设置一个特殊的'init'操作并从'mount'生命周期钩子上的Main.vue组件调度它来实现这一点,如下所示:

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

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

我搜索过这些文档并且没有找到解决方案,但是如果我只是在寻找错误的东西,我希望有人在那里找到一种优雅的方法来做到这一点。 / p>

2 个答案:

答案 0 :(得分:0)

我需要类似的东西,而我的解决方案是在文档加载时运行:

var app_store = new Vuex.Store({
  state: state,
  getters: getters,
  mutations: mutations,
  actions: actions,  	
});

$(document).ready(function()
{  
  app_store.dispatch("initSettings",null); 
});

答案 1 :(得分:0)

如果您的商店在单独的文件store/index.js中,则可以将其导入。

import store from '/store';

store.dispatch("stuff")

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

require()复制。这是一个明显的区别。