Currently, I am utilizing Vue along with Vuex to manage the state in my application.
Let's take a look at my store setup:
state: {
nodes: {}
},
actions: {
loadNodes ({ commit }, parameter) {
axios.get('http://URL' + '/nodes', {
params: {
name: parameter['name'],
type: parameter['type']
}
}).then((response) => {
commit('nodeActivity', { uid: parameter['uid'], res: response.data })
})
}
},
mutations: {
nodeActivity (state, data: {uid, res}) {
Vue.set(state.nodes, data.uid, data.res)
}
},
getters: {
getNodes: state => state.nodes
}
The structure of nodes is currently a dictionary format as follows: { id: data }
Next, I have a component with a lifecycle hook:
created () {
this.$store.dispatch('nodeActivity', { uid: this.$props.uid, name: this.$props.namepar, type: this.$props.typepar })
}
After making an API call and storing data asynchronously, everything functions correctly. However, I encounter an issue when trying to retrieve specific data based on uid, such as this.$store.getters.getNodes[0]. While this.$store.getters.getNodes works well, indicating that reactivity is maintained through Vue.set(..), attempting to create a new variable like
tmp = this.$store.getters.getNodestmp2 = tmp[0] does not result in reactivity. This behavior has left me puzzled and seeking advice on how to improve the design of my store.