Я создал laravel проект с vue и vuex. Здесь я пытаюсь создать таблицу crud, где я использую vuex для получения данных. Но по какой-то причине я не могу получить данные.
Ошибка:
[Vue warn]: Ошибка в подключенном хуке: «Ошибка типа: Ошибка чтения свойства« allStage » undefined "
TypeError: Не удается прочитать свойство 'allStage' из неопределенного
Stage. vue
<template>
<div>
<section class="content">
<div class="row justify-content-around" >
<div class="col-8 ">
<div class="card">
<div class="card-header">
<h3 class="card-title">Stage</h3>
<div class="card-tools">
<button class="btn btn-primary">
<router-link to="/add-stage" style="color:#fff"> Add Stage</router-link>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>
<select name="" id="" v-model="select" @change="deleteSelected">
<option value="">Select</option>
<option value="">Delete all</option>
</select><br>
<input type="checkbox" @click.prevent="selectAll" v-model="all_select">
<span v-if="all_select==false">Check All</span>
<span v-else>Uncheck All</span>
</th>
<th>Sl</th>
<th>Code</th>
<th>Name</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(stage,index) in getallStage" :key="stage.id">
<td><input type="checkbox" v-model="stageItem" :value="stage.id" ></td>
<td>{{index+1}}</td>
<td>{{stage.code}}</td>
<td>{{stage.name}}</td>
<td>{{stage.description}}</td>
<td>{{stage.created_at | timeformat}}</td>
<td>
<router-link :to="`/edit-stage/${stage.id}`">Edit</router-link>
<a href="" @click.prevent = "deletestage(stage.id)" >Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
</template>
<script>
export default {
name: "Stage",
data(){
return{
stageItem:[],
select:'',
all_select:false
}
},
mounted(){
this.$store.dispatch.allStage
},
computed:{
getallStage(){
return this.$store.getters.getStage
}
},
methods:{
deletestage(id){
axios.get('/stage/'+id)
.then(()=>{
this.$store.dispatch.allStage
toast({
type: 'success',
title: 'Stage Deleted successfully'
})
})
.catch(()=>{
})
},
deleteSelected(){
console.log(this.stageItem)
axios.get('/deletestage/'+this.stageItem)
.then(()=>{
this.stageItem = []
this.$store.dispatch.allStage
toast({
type: 'success',
title: 'Stage Deleted successfully'
})
})
},
selectAll(){
if(this.all_select==false){
this.all_select = true
for(var stage in this.getallStage){
this.stageItem.push(this.getallStage[stage].id)
}
}else{
this.all_select = false
this.stageItem = []
}
}
}
}
</script>
<style scoped>
</style>
store. js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default {
state:{
stage:[],
allstages:[]
},
getters:{
getStage(state){
return state.stage
},
allstages(state){
return state.allstages
}
},
actions:{
allStage(context){
axios.get('/stage')
.then((response)=>{
context.commit('stages',response.data.stages)
})
},
allstages(context){
axios.get('/stages')
.then((response)=>{
context.commit('allstages',response.data.stages)
})
},
},
mutations:{
stages(state,data){
return state.stage = data
},
allstages(state,payload){
return state.allstages = payload
}
}
}
приложение. js
window.axios = require('axios');
window.Vue = require('vue');
import vuetify from './plugins/vuetify';
import router from './Router/Router';
import VueTabulator from 'tabulator-tables/dist/css/tabulator_midnight.min.css';
import store from './store/store';
import App from './components/layout/AppComponent.vue';
new Vue({
el : '#app',
router,
vuetify,
VueTabulator,
store,
components:{
'App': App
}
});
StageController. php
<?php
namespace App\Sys\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use App\Sys\Model\Stage;
class CategoryController extends Controller
{
public function __construct()
{
$this->middleware('auth');
}
public function add_stage(Request $request){
$this->validate($request,[
'cat_name'=>'required|min:2|max:50'
]);
$stage = New Stage);
$stage->code = $request->code;
$stage->name = $request->name;
$stage->description = $request->description;
$stage->save();
return ['message'=>'OK'];
}
public function all_stage(){
$stages = Stage::all();
return response()->json([
'stages'=>$stages
],200);
}
public function delete_stage($id){
$stage = Stage::find($id);
$stage->delete();
}
public function edit_stage($id){
$stage = Stage::find($id);
return response()->json([
'stage'=>$stage
],200);
}
public function update_stage(Request $request,$id){
$this->validate($request,[
'name'=>'required|min:2|max:50'
]);
$stage = Stage::find($id);
$stage->code = $request->code;
$stage->name = $request->name;
$stage->description = $request->description;
$stage->save();
}
public function selected_stage($ids){
$all_id = explode(',',$ids);
foreach ($all_id as $id){
$stage = Stage::find($id);
$stage->delete();
}
}
}