vue 中使用vuex和localStorage保存登录状态


0311lc.com说:

需求:刷新页面,登录状态不会因此改 变

首先说一下vuex和localStorage的区别

1.实质区别
vuex存的是状态,存储在内存;localStorage是浏览器提供的接口,让你存的是接口,以文件的形式存储到本地
2.应用场景
vuex用于组件之间的传值,localStorage则主要用于页面之间的传值
3.永久性
当刷新页面时,vuex存储的值会丢失,localStorage不会
总结
localStorage可以代替vuex,对于不变的数据确实可以,但是当两个组件共同用以数据源,如果其中一个组件中的数据源改变,希望另一个组件响应变化,这时候就要选择用vuex。vuex是vue的状态管理机制,是方便组件之间通信的。一个组件的数据变化是会映射到使用这个数据的其他组件。而localStorage是本地存储,是将数据存储到浏览器的方法,一般在跨页面时使用。

注意:localStorage 保存对象的时候,需要先将对象转换成json字符串,然后获取的时候在转换成对象形式

vuex的使用

创建store文件夹

-store 文件夹
–actions.js
–getters.js
–muations.js
–sotre.js
或者

image.png

这样做可以减低代码的耦合度,方便以后维护与修改
然后需要将创建的.js export default 到出去一个变量
然后在index.js中 import getter from ‘./getters’然后

image.png

store中需要保存三个变量isLogin 、currentUser、token
getter.js 中赋值的方式

image.png

mutations 对象中方法或者mutatios.js中

image.png

然后应用mutations修改数据写在actions方法中

image.png

接下来就是在登录成功的时候保存数据到本地和vuex中
这个是保存到vuex中可以如下
1.先引入 import {mapActions} from ‘vuex’
2.在methods方法中

image.png

3.在需要将数据存储到vuex中的时候使用

image.png
注意:刷新的时候vuex数据会丢失所以在computed中

其上的this.isLogin 是store中的isLogin
这个时候需要引入vuex的时候改为
import {mapActions,mapGetters} from ‘vuex’
然后在computed (计算属性中)

 

  ...mapGetters(['isLogin'])  //这样就可以直接this.isLogin获取vuex中的数据了

其次用meta 路由元信息做权限控制

image.png

然后在路由生命周期中判断

作者:拾钱运
链接:https://www.jianshu.com/p/edea07ebd77c
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


发表评论

电子邮件地址不会被公开。 必填项已用*标注