Ways to retrieve the global state from within the mutation namespace module

Question

Ways to retrieve the global state from within the mutation namespace module

Within my state, I have organized two namespace modules: portfolio and stocks. The structure looks like this:

export default new Vuex.Store({
  modules: {
    stocks,
    portfolio
  }
})

The stocks module contains a property called stocks, while the portfolio module contains a property called funds. I am attempting to utilize the BUY_STOCK mutation, which requires access to both stocks from the stocks module and funds from the profile module. In the profile module, I set it up as shown below:

"BUY_STOCK"(state, {stockId, quantity, stockPrice}) {
  console.log(state.stocks.stocks, state.portfolio.funds)
}

However, I ended up receiving undefined. This is because the state being referenced is merely the local module state. How can I gain access to the global state from within this mutation?

javascript vue.js

Answer 1

Answer №1

When working with Vuex actions, you have the ability to access rootState. Instead of directly calling a mutation, consider calling an action:

actions: {
 purchaseStock(context, {stockId, quantity, stockPrice}) {
    console.log(context.state.funds) // accessing local state
    console.log(context.rootState.stocks.stocks) // accessing stocks state via rootState
    // Next step is to invoke mutations using the obtained values 
    context.commit("PURCHASE_STOCK", {stockData, portfolioData}) 
  }
}

Answer 2

When working with Vuex actions, you have the ability to access rootState. Instead of directly calling a mutation, consider calling an action:

actions: {
 purchaseStock(context, {stockId, quantity, stockPrice}) {
    console.log(context.state.funds) // accessing local state
    console.log(context.rootState.stocks.stocks) // accessing stocks state via rootState
    // Next step is to invoke mutations using the obtained values 
    context.commit("PURCHASE_STOCK", {stockData, portfolioData}) 
  }
}

Answer 3

Answer №2

It appears that the profile module was not properly imported into the store/index.js file, which should include:

export default new Vuex.Store({
  modules: {
    stocks,
    portfolio,
    profile
  }
})

Furthermore, it would be beneficial to utilize getters in each module:

portifolio.js

export default {
  state: {
    funds: 'Some funds'
  },
  getters: {
    funds(state) {
      return state.funds
    }
  }
}

stocks.js

export default {
  state: {
    stocks: 'Some stocks'
  },
  getters: {
    stocks(state) {
      return state.stocks
    }
  }
}

You can now access them from the profile module as follows:

profile.js

export default {
  actions: {
    BUY_STOCK({ getters }, { stockId, quantity, stockPrice }) {
      console.log(getters.funds, getters.stocks)
    }
  }
}

Answer 4

It appears that the profile module was not properly imported into the store/index.js file, which should include:

export default new Vuex.Store({
  modules: {
    stocks,
    portfolio,
    profile
  }
})

Furthermore, it would be beneficial to utilize getters in each module:

portifolio.js

export default {
  state: {
    funds: 'Some funds'
  },
  getters: {
    funds(state) {
      return state.funds
    }
  }
}

stocks.js

export default {
  state: {
    stocks: 'Some stocks'
  },
  getters: {
    stocks(state) {
      return state.stocks
    }
  }
}

You can now access them from the profile module as follows:

profile.js

export default {
  actions: {
    BUY_STOCK({ getters }, { stockId, quantity, stockPrice }) {
      console.log(getters.funds, getters.stocks)
    }
  }
}

Ways to retrieve the global state from within the mutation namespace module

Answer №1

Answer №2

Similar questions

Creating a mandatory 'Select' dropdown field in Vue.js

What is the best way to display my table?

Allow the NodeJS application to conduct self-updates using the NPM package manager

Having trouble determining why the design is not displaying correctly

Broadcast to every socket except the one that is malfunctioning on Socket.io

Utilizing JavaScript to Extract JSON Information from Knockout.js

What crucial element is absent from my array.map function?

What is causing it to give me 'undefined' as the result?

Load Angular scripts only when needed

Steps for Implementing a Delay on Bootstrap Dropdown Hover

Is there a method to programmatically identify enterprise mode in IE11?

What is the best way to use lodash to group objects that contain nested objects?

Is it possible for a div nested within another div to still occupy space on the page despite being set

The condition is not being recognized after clicking the third button

Setting a single value for several identifiers within a JSON object

changing the name of a variable within ng-include

What could be causing the delay in response times from these unpredictable APIs within the Express server?

Is it possible to employ getBoundingClientRect() for several elements sharing the same class?

What is the best way to choose all elements that fall between two specific elements?

Mastering the Art of Tallying Select Choices in Protractor