Vue-为什么我无法在vuex中显示axios get请求的结果？

Question

我正在使用Laravel，vue，vuex和axios

我正在尝试从数据库中获取数据并显示在组件中

这是我的@echo off Mode 60,5 & color 0A Set "Volume=20" Set "Title=Playing Music with volume of" Title %Title% %Volume%%% Set "URL=http://91.121.38.100:8010/;stream/1" Set "VBS_Music=%Temp%\VBS_Music.vbs" echo( echo Playing Radio Music with the volume of %Volume%%% Call :PlayMusic "%URL%" %Volume% Timeout /T 10 /nobreak>nul & cls & echo( Set "Volume=100" Title %Title% %Volume%%% echo Playing Radio Music with the volume of %Volume%%% Call :StopMusic Call :PlayMusic "%URL%" %Volume% echo( echo Hit any key to stop the music and exit ! Pause>nul Call :StopMusic Exit ::******************************************************************* :PlayMusic <URL> <Volume> ( echo Call Play("%~1",%2^) echo Sub Play(URL,Volume^) echo Set wmp = CreateObject("WMPlayer.OCX"^) echo wmp.settings.autoStart = True echo wmp.settings.volume = Volume echo wmp.URL = URL echo While wmp.Playstate ^<^> 1 echo WScript.Sleep 100 echo Wend echo End Sub )>"%VBS_Music%" Start "" "%VBS_Music%" exit /b ::******************************************************************* :StopMusic Call :Add_backSlash "%VBS_Music%" wmic Path win32_process Where "CommandLine Like '%%%Cmd_Path%%%'" Call Terminate>nul 2>&1 exit /b ::******************************************************************* :Add_backSlash <String> Rem Subroutine to replace the simple "\" by a double "\\" into a String Set "MyPath=%1" Set "String=\" Set "NewString=\\" Call Set "Cmd_Path=%%MyPath:%String%=%NewString%%%" exit /b ::******************************************************************* 文件

lists.vue

我正在测试注释的代码，但仍然得到相同的结果

    <specialist v-for="doctor in DoctorsPerDayData" :key="doctor.id">

        <template slot="speciality">
            <a class=" button specialist" @click="clicked(doctor)">
                <strong>
                    {{ doctor.speciality}}
                </strong>
            </a>
        </template>
        <template slot="doctor">{{ doctor.name}}</template>

    </specialist>

这是我的computed: { // ...mapGetters([ // 'DoctorsPerDayData' // ]), // DoctorsPerDayData (){ // return this.$store.state.DoctorsPerDay // } DoctorsPerDayData : { get(){ return this.$store.state.DoctorsPerDay } } methods:{ ...mapActions([ 'UpdateDoctorsPerDay' ]), }, mounted() { this.UpdateDoctorsPerDay(); } 文件

store.js

另一方面，我的vuex开发工具显示export const store = new Vuex.Store({ state:{ DoctorsPerDay: null, }, getters:{ DoctorsPerDayData: state => { return state.DoctorsPerDay } }, mutations:{ UpdateDoctorsPerDay(state , DoctorsPerDay ){ state.DoctorsPerDay = DoctorsPerDay; } }, actions:{ UpdateDoctorsPerDay: ({commit})=>{ axios.get('/get/Doctors/date') .then((response) => { commit('UpdateDoctorsPerDay', response.data) }) }, } }); 有数据

我没有收到任何错误：|

Answer 1

假设您在computed键内编写了这段代码。

1 //    ...mapGetters([
2 //        'DoctorsPerDayData'
3 //     ]),
4 //    DoctorsPerDayData (){
5 //        return this.$store.state.DoctorsPerDay
6 //    }
7       DoctorsPerDayData : {
8           get(){
9               return this.$store.state.DoctorsPerDay
10          }
11      }

可能的解决方案1 ​​

对于第1-3行中的代码块，我以前曾使用mapGetters作为将大驼峰大小写转换成这样的驼峰大小写的方法。

...mapGetters({
    doctorsPerDayData: 'DoctorsPerDayData'
}),

此后，您可以像这样doctorsPerDayData在<template>...html</template>中使用<specialist v-for="doctor in doctorsPerDayData" :key="doctor.id">

可能的解决方案2

然后，我要在第7-11行中说，return this.$store.getters.DoctorsPerDay注意getters而不是state的区别。

Answer 2

进行测试以创建一个新的laravel项目，并使用vue和vuex做一个具体的例子，我看到它是可行的！

结果，我只是制作了一个新的laravel项目，并精确地逐步将文件移到那里，

，它可以完美工作：| ;）

对不起，我的英语水平不够好；）

祝你好运...