安装的挂钩中出现错误：“ TypeError：无法读取未定义的属性'allStage'”

Question

我用vue和vuex创建了laravel项目。在这里，我试图创建使用vuex来获取数据的crud表。但是由于某种原因，我无法提取数据。

错误：

[Vue警告]：挂接的钩子中出现错误：“ TypeError：无法读取属性 未定义的“ allStage””

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
       }



   }
}

app.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();
       }
    }
}

Answer 1

您需要在app.js中创建一个新的商店实例

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

Vue.use(Vuex)
import storeModule from './store/store';

const store = new Vuex.Store(storeModule);

Answer 2

mounted(){
    this.$store.dispatch.allStage
},

应该是

mounted(){
    this.$store.dispatch('allStage')
},