Я пытаюсь получить некоторые глобальные переменные для моего компонента 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 дней, пожалуйста, кто-нибудь, помогите мне.