无法读取属性'；吸气剂'；“未定义”的定义；vue.js

有一个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'])
}

我还有警告（警告在./src/main.js中）

在“/store”中找不到导出“default”（作为“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')

并且组件本身不输出

action

用于

commit

将数据提交到

mutation

中，在mutation中，您必须将数据设置为state

您不应该在

操作

中获取数据，而应该从组件、mounted（）或其他地方调用它

例如：

export default {
    mounted() {
        var response = await fetch('http://127.0.0.1:8000/rest/');
        var data = await response.json()
        this.$store.dispatch("eventsList", data);
    }
}

和in-store.js：

 actions: {
    eventsList({commit}, data) {
        commit('eventsList', data)
    }
 },
 mutations: {
    eventsList(state, data) {
        state.events= data
    },
 }

---

dispatch

calls

action

->

commit

calls

mutation

=>在mutation中直接将数据设置为state。

我看到的唯一问题是 您的存储未导出任何默认值

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

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

import store from 'src/store'

因此，请使用以下方法，并希望您的问题得到解决

import { store } from './store';

请检查这些链接

有一点值得注意

在下面的几行中，我认为您不需要为此使用wait.getEvents（），因为它已经在其操作中使用了wait

比如说,

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

---

添加将数据分派/提交到事件列表的代码。可以尝试此操作吗？getters:{getEvent:（state）=>{return state.event}你需要提供更多的信息。你能展示你的main.js吗？@Nanfish，添加getEvents操作example@KickButtowski，这段代码与我的代码在原理上有什么不同？在上一个函数（eventList）中，您调用Catalogid，并编写了一个函数“mounted”，用于从rest获取响应。我如何调用（get name）功能发布、更新和删除（也挂载或如何挂载）对不起，我放弃了我的答案（catalogId来自我的代码）挂载（）是vue组件的生命周期挂钩，您可以在那里调用任何rest请求，此外，您可以从任何方法获取数据，但不在操作中。其思想是存储用于保存数据，而不是用于所有其他逻辑。换句话说，您不需要在装入的内部创建函数（分别用于get、post…）把它们都写在一堆里？

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