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

В чём проблема?


Ответы (0 шт):