javascript - 双嵌套动态模块注册-vuex

Question

根据Vuex docs我们可以通过这种方式动态注册一个嵌套模块:

store.registerModule(['nested', 'myModule'], {
  // ...
})

我们可以使用 store.state.nested.myModule 访问这个状态

如何动态注册嵌套在第一个模块深处的另一层的模块。 IE。我怎样才能使模块公开状态改为 store.state.nested.furtherNested.myModule。这是可以做到的吗？

Answer 1

首先需要注册furtherNested模块:

store.registerModule(['nested', 'furtherNested'], {
  // ...
})

然后通过指定数组中的路径在furtherNested中注册myModule模块，如下所示:

store.registerModule(['nested', 'furtherNested', 'myModule'], {
  // ...
})

这是一个简单的例子:

let store = new Vuex.Store({
  modules: { 
    nested: {}
  }
});

store.registerModule(['nested', 'furtherNested'], {})

store.registerModule(['nested', 'furtherNested', 'myModule'], {
  state: { foo: 'bar' }
})

console.log(store.state.nested.furtherNested.myModule);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>