需求：刷新页面，登录状态不会因此改变
首先说一下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
然后在路由生命周期中判断
