Здесь я настроил проект laravel 6 с помощью vue и vuetify для создания таблицы crud, но по какой-то причине я не могу импортировать vueX в мой компонент vue.
Ошибка :
ПРЕДУПРЕЖДЕНИЕ в ./resources/js/store/index.js 8: 11-16 «этап экспорта» не найден в «./modules/stage.js» @ ./resources/js/app.js @ multi ./resources/js/app.js ./resources/sass/app.scss
Ошибка на консоли: Uncaught TypeError: Невозможно прочитать свойство 'getters' неопределенного
index. 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: {}
});
stage. 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; },
}
}
Stage. 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>