How to update API path dynamically in VUEX state

Question

I am trying to dynamically update the API path in my Vuex state. Vuex must have a default path "example.com/api/datasetA.json" set when the page loaded and I want to update the path to "example.com/api/datasetB.json" by the user interaction and fetch the new API data immediately.

The relevant part of my code is as follows (updated code):

VUEX:

export const state = () => ({
  apiData: [],
  apiId: 'datasetA.json'
});

export const mutations = {
  fillApiData: (state, data) => {state.apiData = data},
  updateApi: (state, newApiId) => {state.apiId = newApiId;}
};

export const actions = {
  async getApiData({commit, state}) {
    const response = await this.$axios.$get('https://example/api/'+state.apiId);
    commit('fillApiData', response);

then VUE method as follows:

methods: {

   updateApi(apiId) {
    
      this.$store.commit('updateApi', apiId)
      }

Sølve · Accepted Answer · 2021-05-30 00:00:42Z

1

Create a mutation that changes the vuex state. Then run this mutation(commit) in the getApiData function

export const state = () => ({
  apiData: [],
  apiId: 'datasetA.json'
});

export const mutations = {
  updateAPI(state, newApiId ) {
    state.apiId = newApiId;
  }
};

export const actions = {
  async getApiData({commit, state}) {
    const response = await this.$axios.$get('https://example/api/'+state.apiId);
    commit('updateValue', response);
    commit('updateAPI', 'some.new.datasetB.json');
  }
}

I can update the state directly by using this.$store.state.apiId = apiId in methods but I know this is bad practice

You are correct. However, if you would like that approach to update the state outside Vuex, you can use mutations to change the Vuex - This is good practice.

Then you can do

this.$store.commit('updateAPI', 'my new value')

edited May 30, 2021 at 0:00

answered May 29, 2021 at 23:54

Sølve

4,5062 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mads Over a year ago

I tried the longer approach and I get the following error: [vuex] unknown action type: updateAPI after triggering the user action: methods: { updateAPI(apiId) { this.$store.dispatch('updateAPI', apiId) },

Sølve Over a year ago

dispatch - is used for actions. commit - is used for mutations. So you have to change this.$store.dispatch('updateAPI', apiId) to this.$store.commit('updateAPI', apiId)

Mads Over a year ago

changing it to commit did the trick. However, I noticed that the API data does not update on its own. Is there a straightforward way to trigger a call to fetch the new API data from the updated url simultaneously with the commit?

Sølve Over a year ago

Yes, then you would have to do the first approach I posted above; You fetch the API data via the action getApiData, and inside that function, you do a mutation (commit) to update the state.

Mads Over a year ago

I updated my original code with your example to my initial question. I am not sure if I am doing it correctly now because while the API url is updated, the user interaction still does not trigger a fetch for datasetB. In your code you have commit('updateAPI', 'some.new.datasetB.json'); but this will change the API url without user interaction.

Collectives™ on Stack Overflow

How to update API path dynamically in VUEX state

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related