Inter-store mutual calls

Basic Concepts of Inter-Store Communication

In Vue.js applications, when multiple stores need to share data or call each other, code can be organized in a modular way. Vuex, as Vue's state management library, allows stores to be split into multiple modules, each maintaining its own state, mutations, actions, and getters.

// store/modules/moduleA.js
export default {
  namespaced: true,
  state: () => ({
    count: 0
  }),
  mutations: {
    increment(state) {
      state.count++
    }
  }
}

// store/modules/moduleB.js
export default {
  namespaced: true,
  state: () => ({
    message: 'Hello'
  }),
  actions: {
    showMessage({ commit }) {
      console.log(this.state.moduleB.message)
    }
  }
}

Direct Access Between Modules

Within the same store instance, modules can access the root state and other modules' states via the rootState and rootGetters parameters. This approach is suitable for tightly coupled inter-module communication.

// store/modules/moduleC.js
export default {
  namespaced: true,
  actions: {
    fetchData({ commit, rootState }) {
      // Access moduleA's state
      const count = rootState.moduleA.count
      // Access root state
      const token = rootState.token
    }
  }
}

Cross-Module Calls via Actions

A more recommended approach is to use dispatch to trigger actions in other modules, achieving decoupling between modules. This maintains clear boundaries between modules.

// store/modules/moduleD.js
export default {
  namespaced: true,
  actions: {
    updateCount({ dispatch }) {
      // Call moduleA's action
      dispatch('moduleA/increment', null, { root: true })
    }
  }
}

Cross-Module Access Using Getters

Getters can combine states from multiple modules to create derived states. The rootGetters parameter allows access to other modules' getters.

// store/modules/moduleE.js
export default {
  namespaced: true,
  getters: {
    combinedInfo(state, getters, rootState, rootGetters) {
      return {
        count: rootState.moduleA.count,
        message: rootState.moduleB.message,
        derived: rootGetters['moduleC/processedData']
      }
    }
  }
}

Store Interaction in Complex Scenarios

When business logic involves coordinated operations across multiple stores, a coordinating action can be created to handle cross-module workflows.

// store/modules/coordinator.js
export default {
  namespaced: true,
  actions: {
    async complexOperation({ dispatch }) {
      await dispatch('moduleA/loadData', null, { root: true })
      await dispatch('moduleB/processData', null, { root: true })
      dispatch('moduleC/notifyComplete', null, { root: true })
    }
  }
}

Interaction with Dynamically Registered Modules

Modules registered dynamically using registerModule can also participate in inter-store interactions, but registration order and lifecycle must be considered.

// Dynamically register a module in a component
this.$store.registerModule('dynamicModule', {
  namespaced: true,
  actions: {
    useRootData({ rootState }) {
      console.log(rootState.existingModule.data)
    }
  }
})

Handling Circular Dependencies

When circular calls exist between stores, refactoring or introducing intermediate states is needed to break the cycle.

// Not recommended: Direct circular calls
// moduleA's action calls moduleB, which in turn calls moduleA

// Recommended solution: Use an event bus or intermediate state
const sharedState = {
  pending: false
}

// moduleA
actions: {
  async actionA({ commit, dispatch }) {
    if (sharedState.pending) return
    sharedState.pending = true
    await dispatch('moduleB/actionB', null, { root: true })
    sharedState.pending = false
  }
}

Testing Inter-Store Calls

When writing unit tests, mock the behavior of related store modules to verify the correctness of cross-module calls.

import { createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import moduleA from './moduleA'
import moduleB from './moduleB'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('Store Module Interaction', () => {
  let store
  
  beforeEach(() => {
    store = new Vuex.Store({
      modules: {
        moduleA,
        moduleB
      }
    })
  })
  
  test('moduleA calls moduleB action', async () => {
    const spy = jest.spyOn(store._actions['moduleB/someAction'], '0')
    await store.dispatch('moduleA/actionThatCallsB')
    expect(spy).toHaveBeenCalled()
  })
})

Performance Optimization Considerations

Frequent cross-module calls may impact performance. Optimize by:

1. Combining related operations to reduce dispatch frequency
2. Using cached getters
3. Avoiding cross-module calculations during rendering

// Before optimization: Recalculates on every access
getters: {
  expensiveCalculation(state, getters, rootState) {
    return rootState.largeDataSet.filter(item => 
      item.value > state.threshold
    )
  }
}

// After optimization: Using cache
getters: {
  expensiveCalculation: (state, getters, rootState) => {
    const cacheKey = `${state.threshold}-${rootState.largeDataSetVersion}`
    if (state.cache[cacheKey]) {
      return state.cache[cacheKey]
    }
    const result = rootState.largeDataSet.filter(item => 
      item.value > state.threshold
    )
    state.cache[cacheKey] = result
    return result
  }
}

Store Organization in Large Projects

In large projects, organize store modules using Domain-Driven Design (DDD) principles to clarify module boundaries and interaction protocols.

// store/modules/product/actions.js
export function fetchProducts({ dispatch }) {
  return api.get('/products').then(response => {
    dispatch('setProducts', response.data)
    // Notify cart module to update related product info
    dispatch('cart/updateProductInfo', response.data, { root: true })
  })
}

// store/modules/cart/actions.js
export function updateProductInfo({ commit }, products) {
  // Update the latest product info in the cart
}

Comparison with Pinia

If using Pinia as the state management library, inter-store interaction differs:

// stores/useStoreA.js
export const useStoreA = defineStore('storeA', {
  actions: {
    sharedAction() {
      const storeB = useStoreB()
      storeB.relatedAction()
    }
  }
})

// stores/useStoreB.js
export const useStoreB = defineStore('storeB', {
  actions: {
    relatedAction() {
      // ...
    }
  }
})

Debugging Tips

Use Vue DevTools to visually observe inter-store call relationships:

1. View action call stacks
2. Track state change sources
3. Analyze getter dependencies

For complex interactions, add logs to aid debugging:

// Add a plugin to store configuration
const debugPlugin = store => {
  store.subscribeAction((action, state) => {
    console.log(`[ACTION] ${action.type}`, action.payload)
  })
}

const store = new Vuex.Store({
  plugins: [debugPlugin]
  // ...other configurations
})

Common Issue Solutions

Issue 1: Missing namespace causing naming conflicts

// Error: namespaced: true not set
modules: {
  moduleA: {
    // Missing namespaced: true
    actions: {
      fetch() { /* ... */ }
    }
  },
  moduleB: {
    actions: {
      fetch() { /* ... */ } // Conflicts with moduleA's fetch
    }
  }
}

// Correct: Enable namespacing
modules: {
  moduleA: {
    namespaced: true,
    actions: {
      fetch() { /* ... */ }
    }
  }
}

Issue 2: State dependencies in asynchronous operations

// Unreliable approach: Directly depending on another module's current state
actions: {
  async actionA({ commit, rootState }) {
    const data = await api.get('/data')
    if (rootState.moduleB.someFlag) { // May change during await
      // ...
    }
  }
}

// Reliable approach: Get a stable reference first
actions: {
  async actionA({ commit, rootState }) {
    const shouldProcess = rootState.moduleB.someFlag
    const data = await api.get('/data')
    if (shouldProcess) {
      // ...
    }
  }
}