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

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

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

image.png