Why does it throw an error [Vue warn]: Property "$store" was accessed during render but is not defined on instance?

Question

JavaScript

I am newbie and trying to make an online store with vue. I ran into two errors that I can't fix:
1) [Vue warn]: Property "$store" was accessed during render but is not defined on instance.
2) Uncaught TypeError: Cannot read properties of undefined (reading 'state')

v-catalog.vue

<template>
  <div class = 'v-catalog'>
    <h1>Catalog</h1>
    <div class ="v-catalog__list">
      <v-catalog-item
          v-for="product in PRODUCTS"
          :key="product.article"
          v-bind:product_data="product"
          @sendArticle="showChildArticleInConsole"
      />
    </div>
  </div>
</template>

<script>

import VCatalogItem from "@/components/v-catalog-item";
import {mapActions,mapGetters} from 'vuex'


export default {
  name: "v-catalog",
  components:{
    VCatalogItem

  },
  props:{},
  data(){
    return{

    }
  },
  computed:{
    ...mapGetters([
        'PRODUCTS'
    ]),
  },
  methods: {
    ...mapActions([
        'GET_PRODUCTS_FROM_API'
    ]),
      showChildArticleInConsole(data){
        console.log(data);
      },
    mounted(){
      this.GET_PRODUCTS_FROM_API()
      .then((response)=> {
        if (response.data) {
          console.log('Data here')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.v-catalog {
  &__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

  }
    }
</style>

store.js

import { createStore } from 'vuex'
import axios from "axios";

 const store = 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;
        }
    }

});
export default store;

v-catalog-wrapper.vue

<template>
<div class = 'v-catalog-wrapper'>
  <p>{{title}}</p>
  <v-catalog/>
  <v-cart/>
</div>
</template>

<script>
import VCatalog from "@/components/v-catalog";
import VCart from "@/components/v-cart";


export default {
  name: "v-catalog-wrapper",
  components:{VCart, VCatalog},
  props:{},                                           
  data(){
  return{title:"Catalog Wrapper"}
  },
  computed:{},                                        
  methods:{},
  watch:{},
  mounted(){                                          
    console.log("hello im loaded")
  }
}
</script>

<style >
 .v-catalog-wrapper {
   max-width: 900px;
   margin: 0 auto;
 }
</style>

app.vue

<template>
  <div id="app">
    <p>HelloVue</p>
    <v-catalog-wrapper/>
  </div>
</template>

<script>

import vCatalogWrapper from './components/v-catalog-wrapper'


export default {
  name: 'app',
  components: {
    vCatalogWrapper
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 1

<template>
  <div class = 'v-catalog'>
  <h1>Catalog</h1>
    <div class ="v-catalog__list">
      <v-catalog-item
        v-for="product in PRODUCTS"
        :key="product.article"
        v-bind:product_data="product"
        @sendArticle="showChildArticleInConsole"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'Catalog',
  computed: mapGetters(['PRODUCTS']),
  methods: {
    showChildArticleInConsole(){ /* ... */ }
  }
}
</script>

Please stop using the store in one place. You cross out all the simplicity and elegance.