Laravel（带有vuejs和vuex）无法获取状态

Question

我正在使用Laravel，vue和vuex创建网站。我的目标是使用API​​控制器和Vuex在表中显示数据。

CycleController.php

ssh

cycle.js （Vuex）

public function index()
    {
        $cycles = Cycle::where(['user_id' => Auth::id()])->get();
        return $cycles; 
    }

，但数据未显示在表上，并且没有错误。

CycleTable.vue

import axios from "axios";   
axios.defaults.baseURL = 'http://chickngine.sh/api';    
const state = {
        cycles : {}
    };

    const actions = { 
        retrieveCycle(context){
                axios.get('/cycle') 
                    .then(data =>{
                        console.log(data.data)
                        let cycles = data.data
                        context.commit('retrieveCycle',cycles)  
                    })
                    .catch(error =>{
                        console.log(error)
                })
        }
    }

    const mutations = {
        retrieveCycle(state, cycles) {
            state.cycles = cycles
        }
    }

我通过使用<template> <div class="container-fluid"> <div class="row mt-5"> <div class="col-md-12"> <div class="card"> <div class="card-header color-card-header"> <h3 class="card-title mt-3">Broiler Rearing Cycle</h3> <div class="card-tools"> <button data-target="#modalAddCycle" data-toggle="modal" href="#modalAddCycle" type="button" class="btn btn-success" > <i class="fa fa-plus-circle"></i> </button> </div> <!--end card-tools --> </div> <!--end card-header --> <div class="card-body"> <div class="table-responsive-lg"> <table class="table table-hover"> <thead class="thread-color"> <tr> <th scope="col">No.</th> <th scope="col">Date Loading</th> <th scope="col">Date Harvest</th> <th scope="col">Clean up</th> <th scope="col">Information</th> </tr> </thead> <!--end table head --> <tbody> <tr v-for="item in cycles" :key="item.id"> <td>{{item.date_loading}}</td> <td>{{item.date_harvest}}</td> <td>{{item.clean_up}}</td> <td> <a href="#" @click="infoModal()"> <i class="far fa-eye"></i> </a></td> </tr> </tbody> <!--end table body --> </table> <!--end table --> </div> <!--end table-responsive-lg --> </div> <!--end card-body --> <div class="card-footer"></div> <!--end card-footer --> </div> <!--end card --> </div> <!--end col-md-12 --> </div> <!--end row--> </div> <!--end container--> </template> <script> import { mapState } from 'vuex' name: "CycleDataTable"; export default { data() { return { cycle: {} } }, mounted(){ this.$store.dispatch('retrieveCycle') }, methods:{ infoModal(){ $("#modalInfoCycle").modal("show"); } }, computed:{ ...mapState([ 'cycles' ]) } } </script> 检查了axios是否正常工作，但事实证明它不是空的。