Vuejs ошибка [vuex] unknown getter: products
Есть store.js
import { createStore } from 'vuex'
import axios from "axios"
export default createStore({
state: {
products: [],
},
mutations: {
SET_PRODUCTS_TO_STATE: (state, products) => {
state.products = products;
}
},
actions: {
GET_PRODUCTS_FROM_API({commit}) {
return axios("http://localhost:3000/products", {
method: "GET"
})
.then((products) => {
commit("SET_PRODUCTS_TO_STATE", products.data);
return products;
})
.catch((error) => {
console.log(error);
return error;
})
}
},
getters: {
PRODUCTS(state) {
return state.products;
}
}
})
В компоненте пытаюсь вызвать getter для вывода списка
<template>
<div class="v-catalog">
<h1>Catalog</h1>
<div class="v-catalog__list">
<v-catalog-item v-for="product in PRODUCTS" :key="product.article" :product_data="product"></v-catalog-item>
</div>
</div>
</template>
<script>
import vCatalogItem from "./v-catalog-item.vue"
import {mapActions, mapGetters} from "vuex"
export default {
name: 'v-catalog',
components: {
vCatalogItem,
},
computed: {
...mapGetters([
"PRODUCTS"
]),
},
methods: {
...mapActions([
"GET_PRODUCTS_FROM_API"
]),
showChildArticleInConsole(data) {
console.log(data)
}
},
mounted() {
this.GET_PRODUCTS_FROM_API();
}
}
</script>
И выдаёт ошибку как на action так и на getter:
[vuex] unknown getter: PRODUCTS
[vuex] unknown action type: GET_PRODUCTS_FROM_API
В чём проблема?