vue.js error: Cannot read property 'getters' of undefined"?

Question

Vue.js

There is a Form.vue component that takes the event object from the getter and replaces it in the v-model:

<template>
        <form @submit.prevent="submitForm">
            <div class="form-group row">
                <div class="col-10 d-flex">
                    <input type="" class="title form-control" v-model="getEvent.title" placeholder="Название">
                    <input type="" class="content form-control" v-model="getEvent.content" placeholder="Содержание">
                    <input type="" class="event_date form-control" v-model="getEvent.event_date" placeholder="Дата">
                    <input type="" class="email form-control" v-model="getEvent.email" placeholder="Email">
                </div>
                <div class="d-flex flex-column">
                    <button class="btn btn-success mt-auto" >Создать</button>
                </div>
            </div>
        </form>
    </template>
    
    <script>
    import { mapGetters, mapActions } from "vuex"
    
    export default {
        computed: mapGetters(['getEvent']),
        methods: mapActions(['submitForm'])
    }

</script>

However, it returns an error - getter is undefined. store/index.js:

import Vue from 'vue';
    import Vuex from 'vuex';
    
    
    Vue.use(Vuex);
    
    Date.prototype.getWeek = function () {
        var onejan = new Date(this.getFullYear(), 0, 1);
        var today = new Date(this.getFullYear(), this.getMonth(), this.getDate());
        var dayOfYear = ((today - onejan + 86400000) / 86400000);
        return Math.ceil(dayOfYear / 7)
    }
    
    export const store = new Vuex.Store({
        actions: {
            async getEvents(context) {
                var response = await fetch('http://127.0.0.1:8000/rest/');
                var data = await response.json()
                context('getEvents', data)
            },
            async createEvent(context) {
                await this.getEvents();
                await fetch('http://127.0.0.1:8000/rest/', {
                    method: 'post',
                    headers: {
                        'content-type': 'application/json'
                    },
                    body: JSON.stringify({ event: context.state.event })
                });
                await this.getEvents();
                context.commit('createEvent', context.state.event)
            },
            async editEvent(context) {
                await this.getEvents();
                await fetch(`http://127.0.0.1:8000/rest/${context.state.event.id}/`, {
                    method: 'put',
                    headers: {
                        'content-type': 'application/json'
                    },
                    body: JSON.stringify({ event: context.state.event })
                });
                await this.getEvents();
                context.state.event = {};
            },
            async deleteEvent(context) {
                await this.getEvents();
                await fetch(`http://127.0.0.1:8000/rest/${context.state.event.id}/`, {
                    method: 'delete',
                    headers: {
                        'content-type': 'application/json'
                    },
                    body: JSON.stringify({ event: context.state.event })
                });
                await this.getEvents();
            },
    
    
            submitForm(context) {
                if (context.state.event.id === undefined) {
                    this.createEvent();
                } else {
                    this.editEvent();
                }
            },
    
    
            isMonthEqualNow(object) {
                var event_date = new Date(object.event_date)
                var date_now = new Date()
                return event_date.getMonth() === date_now.getMonth()
            },
            isWeekEqualNow(object) {
                var event_date = new Date(object.event_date)
                var date_now = new Date()
                return event_date.getWeek() === date_now.getWeek()
            },
            isDayEqualNow(object) {
                var event_date = new Date(object.event_date)
                var date_now = new Date()
                return event_date.getDate() === date_now.getDate()
            },
            eventsByFilters(context) {
                var events = context.state.events
                if (context.state.search === '' && context.state.selected) {
                    switch (context.state.selected) {
                        case 'month':
                            return events.filter(item => this.isMonthEqualNow(item))
                        case 'week':
                            return events.filter(item => this.isMonthEqualNow(item) && this.isWeekEqualNow(item))
                        case 'day':
                            return events.filter(item => this.isMonthEqualNow(item) && this.isWeekEqualNow(item)
                                && this.isDayEqualNow(item))
                        default:
                            return events
                    }
                } else {
                    events.filter(item => item.title.indexOf(context.state.search) !== -1)
                }
            }
    
        },
        mutations: {
            setEvents(state,events){
                state.events = events
            },
            createEvent(state, event){
                state.events.push(event)
            }
        },
        state: {
            events: [],
            event: {},
            selected: '',
            search: ''
        },
        getters: {
            eventsByFilters(state) {
                return state.events
            },
            getSearch(state){
                return state.search
            },
            getSelected(state){
                return state.selected
            },
            getEvent(state) {
                return state.event
            }
        },
    });

And also there is a warning(warning in ./src/main.js

"export 'default' (imported as 'store') was not found in './store')

main.js

import Vue from 'vue'
    import App from './App.vue'
    import  store  from './store';
    
    Vue.config.productionTip = false
    
    
    new Vue({
      render: h => h(App),
      store
    }).$mount('#app')

And the components themselves are not output either.

Answer 1

Export is named, and import is default - as a result, you import something that does not exist. Hence undefined instead of a storage object.
Change to . Or on . Well, it will be useful to read the documentation in order not to repeat such mistakes in the future.export const store = new Vuex.Store({export default new Vuex.Store({import store from './store';import { store } from './store';