Маршрут не заполняет данные при обновлении страницы - PullRequest
Новая
       6

Маршрут не заполняет данные при обновлении страницы

0 голосов
/ 20 января 2020

У меня очень базовый c сайт, использующий Vue. JS, VueX и Vue -Router.

У меня определены два маршрута: '# /' и '# / account / 'Эти маршруты заполнены двумя компонентами в. vue файлах, загружаемых динамически при загрузке страницы через http- vue -loader (чтобы избежать работы с webpack / et c с момента реализации проекта настолько мал).

Представление «# /» является компонентом stati c.

Представление «# / account» отображает имя и фамилию пользователя в полях <input type="text"> .

Если я перехожу на страницу «# / account» из «# /», имя / фамилия заполняются правильно. Но если я затем обновлю sh браузер, текстовые поля станут пустыми и не будут заполняться до тех пор, пока я не перейду к другому маршруту и ​​не вернусь снова.

Данные в этом компоненте загружаются из глобального Магазин VueX, который commit() загружается при загрузке страницы в результате вызова AJAX.

Почему эти поля не заполняются при обновлении страницы sh?

Соответствующий код:

main. js: (загружается как <script type="module"> из основного html файла) 

const store = new Vuex.Store({
    state: {
        user: {firstname: '', lastname: ''}
    },
    mutations: {
        updateUser(state, user){

            state.user = { ...user }
        }
    }
})


$(document).ready(function() {
let templates = {}
templates.home = httpVueLoader('./templates/home.vue')
templates.account = httpVueLoader('./templates/account.vue')
templates.not_found = httpVueLoader('./templates/404.vue')

// Set up routes:
const routes = [
    { path: '/', component: templates.home },
    { path: '/account', component: templates.account },

    // Not found: (place this route last)
    { path: '*', component: templates.not_found }
]

const router = new VueRouter({ routes })

// Start Vue app:
const app = new Vue({
    router,
    store,
    components: {

    }
}).$mount('#vueApp')

checkLogin()    // Check if user is logged in - if so, populate VueX store with user info.

function checkLogin() {
    // Check if user is already logged on.
    console.log("Checking for login...")
    Get({
        url: 'https://[api-url]/v1/auth'
    })
    .then((result) => {
        console.log("Result: ", result)
        if (result.data.logged_in) {
            loadUI()
            store.commit('updateUser', result.data.user)
        }
        else
        {
            logout()
        }
    })
}

account. vue: 

<template>
    ...

                    <input type="text" class="form-control" id="txtFirstname" aria-describedby="txtFirstnameHelp" v-model="firstname">
                    ...
                    <input type="text" class="form-control" id="txtLastname" aria-describedby="txtLastnameHelp" v-model="lastname">
                    ...

</template>

<script>
module.exports = {
    data: function() {
        return {

            firstname: this.$store.state.user.firstname,
            lastname: this.$store.state.user.lastname
        }
    },
    ...
</script>

<style scoped>

</style>

1 Ответ

1 голос
/ 20 января 2020

Исправлено то, что эти свойства должны быть объявлены как вычисленные свойства, а не возвращаться в объекте data:

в Account. vue:

module.exports = {data: function () {return {

    }
},
computed: {
    firstname: function() { return this.$store.state.user.firstname },
    lastname: function() { return this.$store.state.user.lastname }
},

...

...