1. Anuncie Aqui ! Entre em contato fdantas@4each.com.br
Anuncie aqui Patrocinador Anuncios

vue js user state management is not working properly on vue js 3

Discussão em 'Outras Linguagens' iniciado por Narakaya, Outubro 5, 2024 às 09:52.

  1. Narakaya

    Narakaya Guest

    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

    Continue reading...
    Narakaya, Outubro 5, 2024 às 09:52
    #1

Compartilhe esta Página