vuex之getter的使用

上次我们通过登录这个案例讲解了vuex中state、mutation的简单使用，那么在这里我们继续来看一下action、getter是怎么使用的。根据上次写的案例（上次写的可以通过这个地址查看https://blog.youkuaiyun.com/angel_Wang123/article/details/105166889）我们再添加一些功能，比如会员等级。在state里面我们可以添加一个数据就是当前登录的用户他的会员等级是什么



登录以后会传递过来用户名和他现在的等级，在这里我还是用延时器进行模拟



从后台传递过来的数据有时候可能不是我们想要的，这个时候我们就可以在getter里面处理这些数据得到我们想要的。比如在这里用户等级为3，但是我们想让他在页面中显示的是svip，在store文件夹中创建一个getters.js文件

拿到state中vipLevel进行一下处理，将getters暴露出去，在index.js中引入


使用vipLevel数据的时候用的应该是getter里面处理过的，所以要修改一下Helloword.vue


好了，这样就实现了我们想要的效果。大家会发现我们经常使用this.$store来取数据，不管是state还是getter都可以获取到，但是在书写起来比较长，比较繁琐，针对这种情况vuex官网给我提供的有辅助函数mapState、mapGetters。


vuex中getter的使用就是这样啦，基本上跟我们computed计算属性的使用方式是一样的。