又仔细看了一遍vuex的文档,还是云里雾里的,不过至少明白它是一个专门管理状态的,根据数据状态的改变可以驱动视图更新,既然是这样那至少登录注册是一种状态,就用登录来做测试,学习vuex,不过话说回来,既然专门管理状态,那我至少要仔细推敲一下这个learn的学习项目有那些状态逻辑。
成都创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、网站建设、外贸网站建设、四川网络推广、微信小程序开发、四川网络营销、四川企业策划、四川品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;成都创新互联为所有大学生创业者提供四川建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com1、据说储存的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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。