- 目标:实现“主页”、“用户登录”、“用户登出”和“用户信息”四个页面,主页根据用户登录情况,展现不同信息,用户信息和登出页面需要用户已经登录的状态。
- 目的:初步掌握vue、vuex和vue-router,贯通vue单页面应用流程与配置
- 页面:
- 首页
- 用户信息页
- 登出
1.用户状态管理
采用vuex储存,在每一个mutations中不仅改变用户状态,而且使用sessionStorage存储用户信息
每个分页面通过store的state判断用户是否已登录
2.vue-router
- 利用导航钩子判断路由元信息是否包含登录验证
- 动态路由匹配
3.ajax
可采用vue-resourse或axios
总结
总结起来,其实用到的东西并不多,但是一开始写还是很多没有思路,慢慢有思路,对照官方文档就好。
遇到的问题:vuex用到module,因此在往state里添加信息的时候注意要先索引module的名称
不足之处
每个页面用的公共header,本想放置到app.vue中去,但是登录了以后发现虽然store的state变化了,但是header虽然依据了state状态,但并未发生改变,尝试多种写法无效后,把每个页面都添加了header组件,这样跳转的时候header状态自然发生了变化。
具体参见项目地址