Greetings to all who come across this query. I am currently working with Vue 2 and Firebase, aiming to retrieve a list of Arrays containing objects. I have successfully fetched the list from the real-time database in Firebase, but encountered an issue when attempting to store this array into the Vuex state.
Error Message: TypeError: Invalid attempt to destructure non-iterable instance. Non-array objects must be iterable with Symbol.iterator
Here is my code for retrieving data from the Firebase real-time database:
getAllProject() {
//var result = [];
var userId = store.state.user.user.uid;
var project_ref = database.ref("projects/" + userId + "/");
project_ref.on("value", function(snapshot) {
if (snapshot.hasChildren) {
snapshot.forEach(function(DataSnapshot) {
try {
store.dispatch("projects/set_project", DataSnapshot.val());
} catch (error) {
console.log(error);
}
});
}
});
}
Below is my Vuex code snippet:
export const namespaced = true;
export const state = {
test: []
};
export const mutations = {
SET_PROJECT(state, payload) {
state.test.push(payload);
}
};
export const actions = {
set_project({commit}, payload) {
commit("SET_PROJECT", payload);
}
};
This is where I call the getAllProject method:
mounted() {
read_project.getAllProject();
},
The error message output is as follows:
TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
at _nonIterableRest (nonIterableRest.js?3d8c:2)
at _slicedToArray (slicedToArray.js?3835:6)
at Store.set_project (projects.js?f817:296)
at Array.wrappedActionHandler (vuex.esm.js?2f62:851)
at Store.dispatch (vuex.esm.js?2f62:516)
at Store.boundDispatch [as dispatch] (vuex.esm.js?2f62:406)
at eval (readProject.js?72b9:18)
at eval (index.esm.js?e947:4417)
at LLRBNode.inorderTraversal (index.esm.js?e947:2769)
at SortedMap.inorderTraversal (index.esm.js?e947:3219)
Actual array snapshot: https://i.sstatic.net/gX0Wy.png