Question

我正在尝试获取Header vue组件的一些全局变量，我还使用vuex存储模块来保持代码的组织和分离。

过程如下：

1）当头组件被mount（）时，我调度动作getAllGlobals。

2）现在，在Globals商店内，我使axios接到路由/ globals / get-all-globals

的电话

3）如果调用成功，我将更新状态，现在我的Header组件应该能够在mapState vuex helper的帮助下访问globals变量。

现在实际发生了什么

在我的控制台中，我得到的vm.globals是未定义的，我还检查了网络选项卡，并看到当我获得200状态时，响应为空，什么也没有发回。

现在输入我的代码，这是我的标头组件：

<template>
<header class="header_maincontainer">
    <div class="header_small_container">
        <div class="header_small_contact_container" style="">
		    <span class="header_small_text1">Llamanos al: </span>
            <i class="header_small_phone_icon fa fa-phone"></i>
            <a class="header_small_phone_number" href="" >{{ globals.bookingPhone }}</a>
	    </div>
    </div>
</header>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'MainHeader',
computed: {
    
    ...mapState('Globals', ['allGlobals', 'loggedUser', 'globals']),
},

mounted() {
    console.log(this.$options.name+' component successfully mounted');
    this.getAllGlobals();
},

methods:{
    //component actions declaration
    ...mapActions('Globals', ['getAllGlobals']),
  
}
};
</script>

现在这是我的vuex商店中的Globals模块：

import axios from 'axios'

//STATE
const state = {
    allGlobals: [],
    globals: [],
    loggedUser:'',
    layoutLinks: [],
    socialLinks: [],
    loadingStatus:0
}

//GETTERS
const getters = {




}

//ACTIONS
const actions = {

    getAllGlobals ({ commit }) {

        commit( 'SET_LOAD_STATUS', {status: 1} );
        console.log('fetching_all_globals');
        axios.get('/globals/get-all-globals')
        .then((response) => {
            commit('GET_ALL_GLOBALS', { allGlobals: response.data.allGlobals })
            commit( 'SET_LOAD_STATUS', {status: 2} );
        }, 
        (error) => {
            console.log(error);
            commit( 'SET_LOAD_STATUS', {status: 3} );
        })
    },


}

//MUTATIONS
const mutations = {

    GET_ALL_GLOBALS (state, allGlobals) {
        state.allGlobals = allGlobals;
        state.globals = allGlobals.globals;
        state.loggedUser = allGlobals.loggedUser;
        state.layoutLinks = allGlobals.layoutLinks;
        state.socialLinks = allGlobals.socialLinks;
    },


}

export default {
  namespaced: true, state, getters, actions, mutations
}

这是我在Laravel后端的GlobalsController，此函数从/ globals / get-all-globals路由调用。

public function getAllGlobals(){

        $globals = Globals::all()->pluck('name', 'value', 'intValue'); 

        $socialLinks = [
            
            'twitter' => config('globals.twitter'),
            'facebook' => config('globals.facebook'),
            'instagram' => config('globals.instagram'),

        ];

        $layoutLinks = [
            
            'classPosts' => Post::withCategory('Clases')->take(10)->get(),
            'behaviourPosts' => Post::withCategory('Conducta canina')->take(10)->get(),
            'trainingPosts' => Post::withCategory('Formación')->take(10)->get(),

        ];

        $loggedUser = Auth::user();

        $allGlobals = compact('globals', 'socialLinks', 'layoutLinks', 'loggedUser');

        //return dd($allGlobals);

        return response()->json([
		
            'allGlobals' => $allGlobals

        ]);


    }

我已经在此问题上停留了3天，请有人帮助我。

Laravel＆Vue：从axios呼叫中获得空白响应

0 个答案: