Сразу скажу, указанный пример работает и решает мои задачи, но интуитивно чувствую, что это может быть антипаттерном.
Есть SPA с возможностью регистрации и входа на сайт. На некоторых страницах, пока юзер не залогинен, надо показывать пустой список. А когда залогинится - запросить данные с сервера. Вопрос, как разные компоненты могут отслеживать факт успешного логина на сайт?
Я делаю так:
// store, отвечающий за авторизацию
actions: {
login: function ({state, commit}) {
// ...
axios.post(api.auth.login, {
email: state.reg.email,
password: state.reg.password
}).then(response => {
// ...
app.$emit('login'); // важная часть. app это экземпляр приложения Vue
}).catch(err => {
// ...
});
}
}
// В компоненте
created(){
this.$root.$on('login', function() {
// здесь запрашиваем данные
});
},
destroyed() {
this.$root.$off(['login']);
},
Если это - плохая практика, то как надо делать? Ну или какие вообще тут есть варианты?
Ок, я вижу, что плохо объяснил. В компоненте есть некий массив:
// тот же компонент, где created и destroyed из предыдущего листинга
computed: {
auth: function () {
return this.$store.state.auth;
}
},
data: function() {
return {
items: []
};
},
В нем изначально данных нет, потому что юзер не авторизован. В шаблоне там примерно такое:
<template>
<div>
<v-data-table
v-if="auth.isAuth"
:items="items"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.id }}</td>
<td>{{ props.item.name }}</td>
</template>
</v-data-table>
<div v-else="">
Пожалуйста, авторизуйтесь для просмотра этой информации
</div>
</div>
</template>
Соответственно, после успешного логина нужно массив items обновить, запросив откуда-то. Сейчас я делаю это с помощью событий, как описал выше.
