CODEWITHSUNDEEP
vue.jsvuex
Felix Eklöf
Felix Eklöf

Reputation: 3720

Vuex use keys to access object in state

I have code like this for a store in Vuex, if do it like the code below it works fine.

state: {
    APIData: {},
},
getters: {
    getFeed: state => {return state.APIData },
},
mutations: {
    SET_FEED_DATA(state, {folder_id, data}) {
        state.APIData = data
    }
},

However, if I try to use a key to set and get the value it return undefined in the getter. I want to do this because I have a for loop in my template calling an action multiple times but with different id's that I will use here for the key value.

state: {
    APIData: {},
},
getters: {
    getFeed: state => {return state.APIData["test"] },
},
mutations: {
    SET_FEED_DATA(state, {folder_id, data}) {
        state.APIData["test"] = data
    }
},

Edit

Looking in Vue debugger I find the following, so it seems the mutation is setting that data but the getter can access it.

enter image description here

Upvotes: 1

Views: 1302

Answers (1)

andsilver
andsilver

Reputation: 5972

Inside the mutation, try to set it like below:

state.APIData = { ...state.APIData, test: data };

The getter is for APIData and it will not recognize the change if you update an individual property directly. You need to reset the whole APIData object.

To replace the test with a variable:

state.APIData = { ...state.APIData, [VARIABLE_NAME]: data };

For example, if you want to pass the key name as folder_id in your code:

state.APIData = { ...state.APIData, [folder_id]: data };

Upvotes: 2

Related Questions