Uncaught TypeError.无法读取未定义的'getters'属性。无法读取未定义的属性 "getters"。

Question

在这里, 我在laravel 6项目中设置了vue和vuetify来创建一个crud表, 但由于某些原因, 我无法将vueX导入到我的vue组件中.

错误：在.resourcesjsstore中出现警告。

WARNING in .resourcesjsstoreindex.js 8:11-16 "export 'stage' was not found in '.modulesstage.js' @ .resourcesjsapp.js @ multi .resourcesjsapp.js .resourcessassapp.scss".

在 console:Uncaught TypeError 出错。无法读取未定义的属性 "getters"。

索引.js

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

//import {stage}  from './stage.js';
import {stage} from './modules/stage.js';




Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
   stage
  },
  state: {},
  mutations: {},
  actions: {},
  getters: {}
});

舞台.js

export default  {
    state: {
      stages: []
    },
    mutations: {
        ADD_STAGE(state, stage) {
            state.stages.push({
                id: this.getters.newStageid,
                code: stage.code,
                name: stage.name,
                description: stage.description

            });
        },
        UPDATE_STAGE(state, payload){
            state.stages = state.stages.map(stage => {
                if (stage.id === payload.id) {
                    return Object.assign({}, stage, payload)
                }
                return stage;
            })
        },
        REMOVE_STAGE(state, stage){
            var stages = state.stages;
            var id = stage.id;
            var index = state.stages.findIndex(stage => stage.id == id)
            stages.splice(index, 1);
        },
    },
    actions: {
        getStage({commit}, stage){
            commit('GET_STAGE', stage)
        },
        addStage({commit}, stage){
            commit('ADD_STAGE', stage)
        },
        updateStage({commit}, payload){
            commit('UPDATE_STAGE', payload)
        },
        removeStage({commit}, stage){
            commit('REMOVE_STAGE', stage)
        },
    },
    getters: {
      stages: state => state.stages,
      newStageid(state) {  return state.stages.length > 0 ? state.stages[state.stages.length-1].id + 1 : 1; },
    }
}

舞台.vue

<template>
<v-container>
   <v-app id="inspire">
  <div>
    <v-toolbar flat color="white">
      <v-toolbar-title>Stage</v-toolbar-title>
      <v-divider
        class="mx-2"
        inset
        vertical
      ></v-divider>
      <v-spacer></v-spacer>
      <v-dialog v-model="dialog" max-width="500px">
        <template v-slot:activator="{ on }">
          <v-btn color="primary" dark class="mb-2" v-on="on">New Stage</v-btn>
        </template>

        <!-- modal part -->
        <v-card>
          <v-card-title>
            <span class="headline">{{ formTitle }}</span>
          </v-card-title>

          <v-card-text>
            <v-container grid-list-md>
              <v-layout wrap>
                <v-flex xs12 sm6 md6>
                    <v-text-field v-model="editedStage.code" label="Code"></v-text-field>
                  </v-flex>

                  <v-flex xs12 sm6 md6>
                    <v-text-field  v-model="editedStage.name" label="Name"></v-text-field>
                  </v-flex>

                    <v-flex xs12 sm6 md6>
                    <v-text-field  v-model="editedStage.description" label="Description"></v-text-field>
                  </v-flex>
 </v-layout>
            </v-container>
          </v-card-text>

                        <v-spacer></v-spacer>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
            <v-btn color="blue darken-1" flat @click="save">Save</v-btn>
          </v-card-actions>
        </v-card>

        <!-- end modal -->

      </v-dialog>
    </v-toolbar>

    <v-data-table
      :headers="headers"
      :items="stages"
      hide-actions
      :pagination.sync="pagination"
      style="text-align: center;"
    >
      <template v-slot:items="props" style="text-align: center !important;">
        <td>{{ props.item.code }}</td>
          <td>{{ props.item.name }}</td>
          <td>{{ props.item.description }}</td>

          <td>
            <v-icon small class="mr-2" color="success" @click="editItem(props.item)">Edit</v-icon>
            <v-icon small class="mr-2" color="error" @click="deleteItem(props.item)">Delete</v-icon>
            <v-icon small color="blue" @click="addStageToTable(props.item)">Add Stage</v-icon>
          </td>
      </template>
    </v-data-table>
    <div class="text-xs-center pt-2">
      <v-pagination v-model="pagination.page" :length="pages"></v-pagination>
    </div>
  </div>
   </v-app>
</v-container>
</template>
<script>
  export default {
    data: () => ({
      dialog: false,
      pagination: {
        rowsPerPage: 3,
        totalItems: 0
      },
   headers: [

        { text: 'Code', value: 'code' },
        { text: 'Name', value: 'name' },
        { text: 'Description', value: 'description' },   
        { text: 'Actions', value: 'action'},
      ],
      editedIndex: -1,

      editedStage: {

        code: '',
        name: '',
        description: ''

      },
      defaultStage: {

        code: '',
        name: '',
        description: ''

      }
    }),

    computed: {
      formTitle () {
        return this.editedIndex === -1 ? 'New Stage' : 'Edit Stage'
      },
      stages(){
          return this.$store.state.stage.stages
      },
      pages () {
        if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) return 0

        this.pagination.totalItems = this.$store.state.stage.stages.length;

        return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
      }
    },

    watch: {
      dialog (val) {
        val || this.close()
      }
    },

    methods: {

      editItem (item) {
        this.editedIndex = this.stages.indexOf(item);
        this.editedStage = Object.assign({}, item)
        this.dialog = true
      },

      deleteItem (item) {
        this.$store.dispatch('removeStage', item);
      },

      close () {
        this.dialog = false
        setTimeout(() => {
          this.editedStage = Object.assign({}, this.defaultStage)
          this.editedIndex = -1
        }, 300)
      },

      save () {
        if (this.editedIndex > -1) {
          this.$store.dispatch('updateStage', this.editedStage);
        } else {
          this.$store.dispatch('addStage', this.editedStage);
        }
        this.close()
      },

      addStageToTable(item){
        this.$store.dispatch('addStageToTable', item);
      }
    }
  }
</script>