我的应用程序使用
-
axios
从后端服务器获取用户信息的步骤
-
vuex
存储用户
-
vue路由器
在每个用户的页面上导航
在App.vue中,将调度提取
export default {
name: 'app',
components: {
nav00
},
beforeCreate() {
this.$store.dispatch('fetchUsers')
}
}
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
通过吸气剂。
现在,应用程序的行为取决于时间。如果我访问
/
/关于
/
首先,快速导航到
/关于
这个
用户数
是
0
. 但在控制台中,它仍然显示正确的用户计数(从登录开始)
SET_USERS
).
使用者
然后再次呈现HTML显示?