Vuex：存储模块循环依赖性

Question

I have the following situation:

store/index.js

import moduleA from '@/store/module-a';
import moduleB from '@/store/module-b';

export default new Vuex.Store({
  modules: {
    A: moduleA,
    B: moduleB
  }
});

store/module-a.js

export default {
  namespaced: true,
  state: {
    val: // constructed using localStorage
  }
};

store/module-b.js

export default {
  namespaced: true,
  state: {
    val: // requires store/module-a.js state.val to construct
  },
  mutations: {
    add: function () {
      // requires store/module-a.js state.val
    }
  }
};

If I try to import store from '@/store inside of module B, and then access store.state.A.val , I'd get a cyclic dependency, where store --> moduleB --> store .

I can construct the store.state.A.val inside of module B, but that would be duplicating logic, and since module A is being loaded first, it would be nice if I could just access it from module A. Is that possible?

Answer 1

I'd construct your b store's val as a default, not including any info from settings. Then have a mutation or action that sets it up properly from settings (a). Probably should be an Action, since Mutations only get the local state, whereas Actions get a context that includes the rootState from which you can access the other modules. Alternatively you can just use a getter for b.val ; getters have access to rootState (and rootGetters ) as well.