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

Question

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

CycleController.php

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

循环.js ( Vuex )

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
        }
    }

但数据没有显示在表格上，也没有错误。

CycleTable.vue

<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 是否正在使用console.log(data.data)，但事实证明它不是空的。

标签： laravelvue.jsvuex