Laravel & Vue: получение пустого ответа от вызова Axios - PullRequest
0 голосов
/ 03 ноября 2018

Я пытаюсь получить некоторые глобальные переменные для моего компонента Header vue, я также использую модули хранилища vuex, чтобы сохранить мой код организованным и отделенным.

Процесс выглядит так:

1) Когда компонент заголовка смонтирован (), я отправляю действие getAllGlobals.

2) Теперь внутри магазина Globals я заставляю axios get call to route / globals / get-all-globals

3) Если вызов выполнен успешно, я обновляю состояние, теперь мой компонент Header должен иметь возможность доступа к глобальным переменным с помощью помощника mapState vuex.

СЕЙЧАС ЧТО НАСТОЯЩИМ ПРОИЗОЙДЕТ:

В моей консоли я вижу, что 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>

Теперь это мой модуль Globals в моем магазине vuex:

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
}

А это мой GlobalsController в бэкэнде Laravel, эта функция вызывается из маршрута / 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 дней, пожалуйста, кто-нибудь, помогите мне.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...