CODEWITHSUNDEEP
vue.jsnuxt.jsvuex
Mads
Mads

Reputation: 127

How to update API path dynamically in VUEX state

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)
      }

Upvotes: 0

Views: 298

Answers (1)

Sølve
Sølve

Reputation: 4406

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')

Upvotes: 1

Related Questions