Мое приложение использует
- axios для получения информации о пользователе с внутреннего сервера
- vuex для хранения пользователей
- vue-router для навигации по странице каждого пользователя
В App.vue отправка выборки
export default {
name: 'app',
components: {
nav00
},
beforeCreate() {
this.$store.dispatch('fetchUsers')
}
}
В store.js,users - это объект с pk (первичным ключом) для информации пользователя.
export default new Vuex.Store({
state: {
users: {},
},
getters: {
userCount: state => {
return Object.keys(state.users).length
}
},
mutations: {
SET_USERS(state, users) {
// users should be backend response
console.log(users.length)
users.forEach(u => state.users[u.pk] = u)
actions: {
fetchUsers({commit}) {
Backend.getUsers()
.then(response => {
commit('SET_USERS', response.data)
})
.catch(error => {
console.log("Cannot fetch users: ", error.response)
})
})
Здесь Backend.getUsers() - это вызов axios.
В другом компоненте, который отображается на /about в vue-router он просто отображает userCount через геттер.
Теперь поведение приложения зависит от времени.Если я сначала зайду / и подожду 2-3 секунды, а затем перейду к /about, userCount будет отображаться правильно.Однако, если я зайду /about напрямую или сначала займусь / и быстро перейду к /about, userCount будет 0.Но в консоли все равно отображается правильное количество пользователей (из журнала SET_USERS).
Что мне здесь не хватало?Разве получатель магазина не должен увидеть обновление в users и снова отобразить HTML-дисплей?