挂载钩子中的错误：“TypeError：无法读取未定义的属性 'allStage'”

Posted 2023-02-23

【中文标题】挂载钩子中的错误：“TypeError：无法读取未定义的属性 \'allStage\'”

【英文标题】：Error in mounted hook: "TypeError: Cannot read property 'allStage' of undefined"挂载钩子中的错误：“TypeError：无法读取未定义的属性 'allStage'”

【发布时间】：2020-08-14 22:30:03

【问题描述】：

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

错误：

[Vue 警告]：挂载钩子错误：“TypeError：无法读取属性 'allStage' of 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
       



   

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();
       
    

【问题讨论】：

您能否提供您的 app.js 文件的代码，或者您在哪里设置 vue 实例 new Vue()

@Hides 我已经在上面添加了代码......你现在可以看到了。

【参考方案1】：

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

应该是

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

【讨论】：

虽然这是对的，但这不是问题的答案，因为 this.$store 没有定义

正如 Hides 所说，您需要创建一个 vuex 存储实例。您仍然需要正确的调度语法。

【参考方案2】：

你需要在你的 app.js 中创建一个新的 store 实例

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

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

const store = new Vuex.Store(storeModule);

【讨论】：

不，我没有收到任何错误，但表格仍然是空的。

@kinleyom 您对 ('/stage') 的 axios 调用是否返回任何内容？

不，它没有返回任何东西。

@kinleyom 尝试修复它，看看你有什么