从零学习vue之登录页面demo

• 目标：实现“主页”、“用户登录”、“用户登出”和“用户信息”四个页面，主页根据用户登录情况，展现不同信息，用户信息和登出页面需要用户已经登录的状态。
• 目的：初步掌握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状态自然发生了变化。

具体参见项目地址