Vue: Cannot read properties of undefined (reading 'getters')"

При попытке вывести продукты в компоненте MainPage не удается прочитать список продуктов записанный в store, выдает такое

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'getters')"

Пробовала сделать в файле MainPage.vue и без mapGetters - в computed писала такую конструкцию

return this.$store.state.products

И соответственно в v-for выводила не getAllItems, а просто products, но тогда выдает

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'state')"

Main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'

import router from './router'
import { store } from './store'

Vue.use(Vuex)

Vue.config.productionTip = false
/* eslint-disable no-new */

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <Header></Header>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

<script>

import Footer from './components/Footer'
import Header from './components/Header'

export default {
  name: 'App',
  components: {
    Header,
    Footer
  },
  data: function () {
    return {
    }
  }
}
</script>

<style> @import './assets/css/style.css'; </style>

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    products: [
      {
        title: 'Apple Iphone 14 pro',
        price: 115999,
        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis distinctio dolorum, et illum minima possimus quaerat sunt vero! A aut debitis dolorem doloremque ipsum labore libero nobis, provident quia voluptatem?',
        link: 'google.com',
        img: 'iphone.jpeg'
      },
      {
        title: 'Apple Iphone 13 pro',
        price: 115999,
        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis distinctio dolorum, et illum minima possimus quaerat sunt vero! A aut debitis dolorem doloremque ipsum labore libero nobis, provident quia voluptatem?',
        link: 'google.com',
        img: 'iphone.jpeg'
      }
    ]
  },
  getters: {
    getAllProducts (state) {
      console.log('Entered')
      return state.products
    }
  },
  mutations: {

  },
  actions: {

  }
})

router/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import Router from 'vue-router'
import MainPage from '../components/MainPage'
import E404 from '../components/E404'
import Register from '../components/Register'
import Auth from '../components/Auth'

Vue.use(Router)
Vue.use(Vuex)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'MainPage',
      component: MainPage
    },
    {
      path: '/authentication',
      name: 'Auth',
      component: Auth
    },
    {
      path: '/registration',
      name: 'Register',
      component: Register
    },
    {
      path: '*',
      name: 'E404',
      component: E404
    }
  ],
  mode: 'history'
})

components/MainPage.vue

<template>
  <div class="_container">
    <h1>Главная/Смартфоны</h1>

    <div class="items-list" id="app">
      <div class="_container">
        <div class="list-item" v-for="(product, index) in getAllProducts" :key="index">
          <div class="list-img">
            <a v-bind:href="product.link" target="_blank">
              <img :src="require(`../assets/img/products/${product.img}`)" alt="">
            </a>
          </div>
          <div class="list-main">
            <div class="list-title">
              <a v-bind:href="product.link" target="_blank">
                <h2>
                  {{ product.title }}
                </h2>
              </a>
            </div>
            <div class="list-description">
              <p>
                {{ product.description }}
              </p>
            </div>
          </div>
          <div class="list-available">
            В наличии
          </div>
          <div class="list-buy">
            <div class="list-price">
              <p>
                {{ product.price.toLocaleString() }}
              </p>
              <p>
                    <span>
                        руб
                    </span>
              </p>
            </div>
            <div class="list-btn">
              <button>В корзину</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  name: 'MainPage',
  data () {
    return {
      store_name: '',
      btn: {
        title: 'В корзину'
      }
    }
  },
  computed: {
    ...mapGetters([
      'getAllProducts'
    ])
  }
}
</script>