I have several vuex modules. For simplicity, I'll explain my problem with an example of what I am facing:

I have 2 vuex modules firstModule.js and secondModule.js

firstModule.js has a myArray[ ] in its state:

//firstModule

const state = {
    myArray: [//has some items]
} 

In secondModule.js I have an action which fetches some data asynchronously from an external API.

This action mits a mutation which should search whether the fetched data is present in firstModule's myArray[ ]

• if the fetched data is present in firstModule's myArray[ ], then add it to secondModule's newArray[ ]

  const state = {
      newArray: []
  }
  
  const mutations = {
      addToNewArray: (state, payload) => {
          function findIyem(value){
              return value === payload.data;
          };    
  
          var item = payload.rootData.myArray.find(findItem);
          state.newArray.push(payload.data);
      }
  }
  
  const actions = {
      fetchData: ({mit, rootState}) => {
          // fetches some data from external API
          var fetched data = data // data is which I received from fetching
  
          mit('addToAnotherArray', {data: data, rootData: rootState.firstModule.myArray}
      }
  }
  

But, here's the problem:

• according to docs mutations in modules does not get access to rootState, only actions and getters get the access to rootState

• without access to rootAtate in mutations, how can I perform the logic as I performed above?

• Do I have to access the rootState in the actions and pass it to the mitted mutation as a payload as I have done above?

I have several vuex modules. For simplicity, I'll explain my problem with an example of what I am facing:

I have 2 vuex modules firstModule.js and secondModule.js

firstModule.js has a myArray[ ] in its state:

//firstModule

const state = {
    myArray: [//has some items]
} 

In secondModule.js I have an action which fetches some data asynchronously from an external API.

This action mits a mutation which should search whether the fetched data is present in firstModule's myArray[ ]

• if the fetched data is present in firstModule's myArray[ ], then add it to secondModule's newArray[ ]

  const state = {
      newArray: []
  }
  
  const mutations = {
      addToNewArray: (state, payload) => {
          function findIyem(value){
              return value === payload.data;
          };    
  
          var item = payload.rootData.myArray.find(findItem);
          state.newArray.push(payload.data);
      }
  }
  
  const actions = {
      fetchData: ({mit, rootState}) => {
          // fetches some data from external API
          var fetched data = data // data is which I received from fetching
  
          mit('addToAnotherArray', {data: data, rootData: rootState.firstModule.myArray}
      }
  }
  

But, here's the problem:

• according to docs mutations in modules does not get access to rootState, only actions and getters get the access to rootState

• without access to rootAtate in mutations, how can I perform the logic as I performed above?

• Do I have to access the rootState in the actions and pass it to the mitted mutation as a payload as I have done above?

• javascript
• vue.js
• vuejs2
• vuex

• most likely you can implement by putting the code into action, where you have broader access to different keywords – MartianMartian Commented Mar 15, 2022 at 13:32

1 Answer 1

In my experience, mutations in a vuex module should directly affect the model in the way they describe. So, your addToNewArray method should simply add the payload data to the state's newArray property.

Actions are where your logic code should run to determine whether or not to make mutations. You can make the check to your firstModule's myArray within the fetchData action. That's the best practice.

But, if you really need to access the rootState variable in a mutation, you have to pass it in as a variable reference, like you are currently.