Vue - 为什么我不能在 vuex 中显示我的 axios get 请求的结果？答案

【问题标题】：Vue - why can't I display the result of my axios get request in vuex?Vue - 为什么我不能在 vuex 中显示我的 axios get 请求的结果？
【发布时间】：2019-01-05 23:00:32
【问题描述】：

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

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

这是我的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 文件

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)
            })
    },
}
});

另一方面，我的 vuex 开发工具显示 DoctorsPerDay 有数据

我没有收到任何错误：|

【问题讨论】：

标签： vue.js axios vuex

【解决方案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'
}),

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

可能的解决方案 2

然后我会在块行中说7-11 它应该是return this.$store.getters.DoctorsPerDay 注意getters 而不是state 的区别。

【讨论】：

测试了 2 个解决方案，结果相同 :(
您能分享一下您的specialist.vue 的样子吗？

【解决方案2】：

为了测试创建一个新的 laravel 项目并使用 vue 和 vuex 做特定的例子，我看到它的工作！

因此，我只是创建了新的 laravel 项目并将我的文件逐步精确地移到那里，

而且效果很好:| ;)

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

祝你好运...

【讨论】：