working with Laravel 10 and Vue js 3 with vuex 4. I have following mainapp.vue file specially manage for menu items as well.
<template>
<div>
<div v-if="$store.state.user">
<!--========== ADMIN SIDE MENU one ========-->
<div class="_1side_menu">
<div class="_1side_menu_logo">
<h3 style="text-align:center;">Logo Image</h3>
<!--<img src="/img/logo.jpg" style="width: 108px;margin-left: 68px;"/>-->
</div>
<!--~~~~~~~~ MENU CONTENT ~~~~~~~~-->
<div class="_1side_menu_content">
<div class="_1side_menu_img_name">
<p class="_1side_menu_name">Admin</p>
</div>
<!--~~~ MENU LIST ~~~~~~-->
<div class="_1side_menu_list">
<ul class="_1side_menu_list_ul">
<li><router-link to="/"><Icon type="ios-speedometer" /> Dashboard</router-link></li>
<li><router-link to="tags"><Icon type="ios-speedometer" /> Tags</router-link></li>
<li><router-link to="category"><Icon type="ios-speedometer" /> Category</router-link></li>
<li><router-link to="adminusers"><Icon type="ios-speedometer" /> Admin users</router-link></li>
<li><a href="/logout"><Icon type="ios-speedometer" /> Logout</a></li>
</ul>
</div>
</div>
</div>
<!--========== ADMIN SIDE MENU ========-->
<!--========= HEADER ==========-->
<div class="header">
<div class="_2menu _box_shadow">
<div class="_2menu_logo">
<ul class="open_button">
<li>
<Icon type="ios-list" />
</li>
</ul>
</div>
</div>
</div>
<!--========= HEADER ==========-->
</div>
<router-view />
</div>
</template>
<script>
export default {
props: ['user'],
data(){
return {
isLoggedIn : false,
}
},
created(){
this.$store.commit('updateUser', this.user)
}
}
</script>
my store.js file is
import { createStore } from 'vuex';
const store = createStore({
state : {
conuter : 1000,
deleteModalObj : {
showDeleteModal: false,
deleteUrl : '',
data : null,
deletingIndex: -1,
isDeleted : false,
},
user: null,
},
getters: {
getCounter(state){
return state.conuter
},
getDeleteModalObj(state){
return state.deleteModalObj;
},
},
mutations: {
changeTheCounter(state, data){
state.conuter += data
},
setDeleteModal(state, data){
const deleteModalObj = {
showDeleteModal: false,
deleteUrl : '',
data : null,
deletingIndex: -1,
isDeleted : data,
}
state.deleteModalObj = deleteModalObj
},
setDeletingModalObj(state, data){
console.log('setDeletingModalObj mutation called');
console.log('Data received:', JSON.parse(JSON.stringify(data))); // Convert Proxy to plain object for logging
state.deleteModalObj = data
console.log('Updated deleteModalObj state:', JSON.parse(JSON.stringify(state.deleteModalObj)));
},
updateUser(state, data){
console.log('Updating user in Vuex:', data);
state.user = data
},
},
actions :{
changeCounterAction({commit}, data){
commit('changeTheCounter', data)
}
}
});
export default store;
I have following welcome.blade.php file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullstack Blog</title>
<link rel="stylesheet" href="/css/all.css">
<script>
(function () {
window.Laravel = {
csrfToken: '{{ csrf_token() }}',
user: @json(Auth::user())
};
console.log('Laravel User:', window.Laravel.user);
})();
</script>
</head>
<body>
<div id="app">
<pre>{{ json_encode(Auth::user()) }}</pre>
@if(Auth::check())
<mainapp :user='@json(Auth::user())'></mainapp>
@else
<mainapp :user="false"></mainapp>
@endif
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
but in my mainapp.vue file <div v-if="$store.state.user"> is not working it means not displaying my menu items and my console printing here but in welcome.blade.php file console.log('Laravel User:', window.Laravel.user); is printing current user object but mainapp.vue file console console.log('mainapp user',this.user); and store.js console.log('Updating user in Vuex:', data); is printing undefined how could I pass blade file user data to vue file via vuex