How to push to an array via a Mutation in Vuex? - vue.js

Question

At the time I was writing this question I found the solution to my problem, but even so I decided to share it with the community to see if I'm solving the problem in the best way possible.
Given a summary of my Store:
// store/index.js
const store = createStore({
state: {
userBooks: [],
}
mutations: {
setUserBooks(state, val) {
state.userBooks.push(val);
},
actions: {
addBook({ commit }, payload) {
commit("setUserBooks", payload);
}
})
I'm calling the action like this:
// Add.vue
methods: {
addBook(book) {
this.$store.dispatch("addBook", book);
},
}
This was giving me the following error:
Uncaught (in promise) TypeError: state.userBooks.push is not a function
books is an object obtained through a v-for and contains properties like id, title, author, thumbnail, and ISBN.
I had already checked this solution: Push to vuex store array not working in VueJS. And that's exactly what I tried, but I got the above error.
How I solved the problem:
I noticed that the book object was coming into the function as a proxy object. With that in mind, I turned the proxy object into a regular object as follows:
addBook(book) {
book = Object.assign({}, book);
this.$store.dispatch("addBook", book);
}
Why does the problem happen?
I confess that I still don't understand why the problem occurs. book is obtained via the v-for of books.
books is assembled from a Google Books API query. The query is done using axios.get().then()
The console.log(this.books) already returns me a proxy object and I confess that I don't know if this is the expected behavior and if I should try to change it.
Anyway the problem is solved, but if anyone has any different approach I would be very happy to learn something new.
EDIT: More code
I decided to edit the question to show how books are generated and populated.
<template>
<figure v-for="(book, index) in books" :key="index">
<Button text="+" #click="addBook(book)" />
<!-- I omitted the use of the other elements to make things more objective. -->
</figure>
</template>
<script>
export default {
data() {
return {
books: {},
};
},
methods: {
search() {
axios
.get(`https://www.googleapis.com/books/v1/volumes?q=${this.seek}`)
.then((response) => {
this.books = response.data.items.map((item) => ({
id: item.id,
title: item.volumeInfo.title,
authors: item.volumeInfo.authors || [this.$t("book.unknown-author")],
ISBN: item.volumeInfo.industryIdentifiers?.[0].identifier ?? item.id,
thumbnail: item.volumeInfo.imageLinks?.thumbnail ?? this.noCover,
}));
})
.catch((error) => console.error(error))
},
addBook(book) {
// Object.assign({}, book)
book = { ...book };
this.$store.dispatch("addBook", book);
},
},
};
</script>

Answer 1

Another new faster way is spread operator. You create a new object and spred variables inside book object. It works same as book = Object.assign({}, book)
book = { ...book }
Bellow more examples of usage of spred operator:
You can use it in arrays to if val is an array with and object if not just don't type ... before val.
setUserBooks(state, val) {
state.userBooks = [...state.userBooks, ...val];
}
Or for example you have big object called user and you have in this object his address object and he wants to change it.
setUser(state, address) {
state.user = {...state.user, address};
}