vue.js - 无法读取未定义的属性 'getters'"vue.js

Question

有一个 Form component.vue，它从 getter 中获取事件对象并在 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'])
}

但是，vue 返回一个错误，指出 getter 未定义。商店/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
        }
    },
});

我也有警告(警告在 ./src/main.js
“在 './store' 中找不到导出 'default'(导入为 'store'))
主文件

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')

并且组件本身不输出

Answer 1

我见过的唯一问题是
您的商店没有导出任何默认值

export const store = new Vuex.Store(...

然而，您的 main.js 用于导入默认值

import store from 'src/store'

所以使用以下内容并希望您的问题得到解决

import { store } from './store';

请检查这些链接

1. export-const-vs-export-default-in-es6

2. named-export-vs-default-export-in-es6

一分建议
在以下几行中，我认为您不需要为 this.getEvents() 使用 await，因为它已经在其操作中使用了 await。
例如，

    await this.getEvents();
    await fetch('http://127.0.0.1:8000/rest/', {