详解Vuex管理登录状态-创新互联

又仔细看了一遍vuex的文档，还是云里雾里的，不过至少明白它是一个专门管理状态的，根据数据状态的改变可以驱动视图更新，既然是这样那至少登录注册是一种状态，就用登录来做测试，学习vuex,不过话说回来，既然专门管理状态，那我至少要仔细推敲一下这个learn的学习项目有那些状态逻辑。

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、网站建设、外贸网站建设、四川网络推广、微信小程序开发、四川网络营销、四川企业策划、四川品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；成都创新互联为所有大学生创业者提供四川建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

1、据说储存的vuex store里面的状态是临时的，右键刷新一下页面这些状态就销毁了（这是据说，请大神解惑我也没办法证实），如果是这样的话，我的用户状态user还是应该要写入sessionStorage，不然登录了的一刷新页面就变成没登录了，用户不就疯了啊。所以store里面的user状态应该要从sessionStorage里面去读。

2、在这个learn项目中现存的页面中，home,paroducts,FAQ，login，regin，应该是不需要登录就可以访问，而manger和manger以下的子页面是必须要登录才可以访问的。

3、比较特殊的是login和regin，如果用户已经登录了，再去访问这2个页面，原则上来说也是可以的，但如果已经登录了，再用其它账号来登录一次，那sessionStorage存在2个user数据，那就显然不合理了，所以应该规定，如果用户已经登录，又去访问login或者regin，那我们应先remove掉sessionStorage里面user数据

4、vuex规定所有状态的改变只能依靠mutation，而要驱动mutation去改变状态的只能是action。那在这个项目里登录状态变化只会有登录、注册和登出这三种情况，登录和注册成功的时候要去执行一个存在user的action，登出的时候去执行一个不存在user的action。

5、vuex官方还提了一个getter的玩意儿，我感觉应该是在我们需要取用store里面状态的时候，确切的说应该是取出这个状态之后，给这个状态做一些加工改变用的，而且应该只能getter一次吧，多了感觉要乱套啊（不知道这个想法对不对），但看见这样的写法this.$store.getters.doneTodosCount，感觉应该可以用不止一次把。估计我想得有点多了，目前看起来也用不上，也许要经历过需要的应用场景才能理解透彻把。

6、还有个module，这个就有点迷了，没太搞懂，先不管了

预想中store的登录状态还是要从sessionStorage来取的，所以我先把路由约束好，那些页面需要user，那些不需要，访问那些页面需要remove user

打开main.js

添加代码

// 这个官方名字叫导航守卫，挺形象的
router.beforeEach((to, from, next) => {
 // 如果是去登录或注册，那就先把user移除
 if (to.path === '/login' || to.path === '/regin') {
  sessionStorage.removeItem('user')
 }
 let user = JSON.parse(sessionStorage.getItem('user'))
 if (!user && (to.path === '/manger/my' || to.path === '/manger/send' || to.path === '/manger/history')) {
  next({ path: '/login' })
 } else {
  next()
 }
})

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章名称：详解Vuex管理登录状态-创新互联
网页地址：http://wjwzjz.com/article/depdoi.html