mardi 25 juin 2019

How to deal when llogged user refresh page of vuejs/vuex app?

in my laravel 5.8 / vuejs 2.5 / "vuex 3.1 user login into the system and some data are stored in user's store, like in auth/Login.vue:

<script>

    export default {
        ...
        mounted() {
            this.setAppTitle("", 'Login', bus);
        }, // mounted() {

        computed: {
            authError() {
                return this.$store.getters.authError;
            }
        }, // computed: {

        methods: {
            authenticate() {
                this.$store.dispatch('login');    // calling action
                login(this.$data.form)
                    .then((res) => {
                        this.$store.commit("loginSuccess", res);  // calling mutation
                        this.$store.dispatch('retrieveUserLists', res.user.id );
                        this.$router.push({path: '/websites-blogs'}); // For debugging!
                    })
                    .catch((error) => {
                        this.$store.commit("loginFailed", {error});   // calling mutation
                    });
            }
        },  // methods: {

and store where user's account and his data are kept resources/js/store.js :

export default {
    state : {
        currentLoggedUser: user,

        // personal data only for logged user
        userLists: [],
    },

    getters : {
        ...
        userLists(state) {
            return state.userLists;
        },

It works ok, until logged user refresh page (F5 or CTRL+R) and user is still logged in my page, but some data, say (userLists) are empty and some listing is empty.

I have MainApp.vue :

<template>
    <body class="account-body">
    <v-dialog/>

    <MainHeader></MainHeader>
    <div class="content p-0 m-0" style="width: 100% !important; margin: auto !important;">
        <notifications group="wiznext_notification"/>
        <router-view></router-view>
    </div>
    </body>

</template>

<script>

    ...
    export default {
        name: 'main-app',
        components: {MainHeader},

        mixins: [appMixin],

        created() {
        },
        mounted() {
            ...
        },

        methods: {
            ...
        }, // methods: {



    }



</script>

and resources/views/index.blade.php :

<?php $current_dashboard_template = 'Horizontal' ?>

<!doctype html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title id="app_title"></title>

    <link href="" rel="stylesheet" type="text/css">
    <link href="" rel="stylesheet" type="text/css">
    <link href="" rel="stylesheet" type="text/css">
    ...
    
    
    

    <link href="" rel="stylesheet" type="text/css">


    ...

</head>


<body>

<div class="wrapper" id="app">

    <main>
        <div id="main_content">
            <mainapp></mainapp>
        </div>
    </main>

</div>

</body>


@include('footer')
<script src=""></script>
<script src=""></script>

<script src=""></script>
<script src=""></script>
<script src=""></script>



<script src="?dt="></script>
"></script>--}}

</html>

Could you please to advice a proper way of such situations ? What could I do?



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire