I have been using @nuxtjs/composition-api(0.15.1), but I encountered some issues when trying to access Vuex getters within computed().
Below is the code snippet using composition API:
import { computed, useContext, useFetch, reactive } from '@nuxtjs/composition-api';
setup() {
const { store } = useContext();
const products = computed(() => {
return store.getters['products/pageProducts'];
});
const pagination = computed(() => {
return store.getters['products/pagination'];
});
useFetch(() => {
if (!process.server) {
store.dispatch('products/getPage');
}
});
return {
products,
pagination,
};
}
The console consistently displays this warning message:
[Vue warn]: Write operation failed: computed value is readonly.
found in
---> <Pages/products/Cat.vue> at pages/products/_cat.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
This situation has left me perplexed. I did not attempt to modify the computed property; rather, I fetched the data via AJAX and then simply assigned it to the state within Vuex mutations.
However, when I refactored the code using option API as shown below:
export default {
components: {
ProductCard,
Pagination,
},
async fetch() {
if (process.server) {
await this.$store.dispatch('products/getPage');
}
},
computed: {
products() {
return this.$store.getters['products/pageProducts'];
},
pagination() {
return this.$store.getters['products/pagination'];
},
},
};
Everything functioned smoothly without any errors or warnings. Could it be that I am incorrectly accessing the getters in the composition API, or is this potentially a bug within the @nuxtjs/composition-api plugin?