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

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

首先说一下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

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