美文网首页
2.手把手教你使用Vuex - 修饰读:"Getter"

2.手把手教你使用Vuex - 修饰读:"Getter"

作者: 木头就是我呀 | 来源:发表于2020-03-09 22:59 被阅读0次

😀 hi,当你看到这里的时候,证明你上一步已经完美的创建好一个vue项目,并且将vuex安装了进去,好!接下来,我们介绍一个读取操作的 " 修饰利器 " ---Getter

  • 🤨 设想一个场景,你已经将todoList展示到页面上了,而且是很多页面都展示了,此时产品经理过来找事儿😡:

    产品经理:客户要求所有的name后面都要加上 " are you ok " 这些文案
    我:为什么?
    产品经理:因为客户是雷老板....
    我:好,我加!

  • 这时候,你第一想到的是怎么加呢,em...在每个页面上,使用this.$store.state.todoList获取到值之后,进行遍历,追加 " are you ok " 即可。

    • 🤦🏻‍♂️ 错!这样很不好。第一,多个页面你就要加很多遍这个方法,造成代码冗余,很不好;而且假如下次产品经理让你把 " are you ok " 改成 ” 你好,我要三杯中的中杯 “,这时候你只能像老罗那样抽自己的脸了...
  • 吸取上面的教训,你觉得我可以耍点小聪明,将多次用到的格式化的方法抽取出来,放在我的utils文件中,哪个组件需要我就引入就可以了,哪里需要点哪里!

    • 👏🏻 不错!这样的确是一种解决上面场景的思路,挑不出哪里不好,如果vuex没有推出这个Getter利器,你完全可以使用这种方式去实现这个需求,而且也不怕他后期需求变更。
  • 🤪 最终的解决方案是什么呢?就是本次将要介绍的这个!deng deng deng deng!Getter!

  • 🤡 怎么用呢?不废话,show you the code!

    • 在store对象中增加getters属性(下面三个getters里的方法,你要加一个然后在组件里测试一个,而不要一次加上下面三个,不然你会迷糊的)
      const store = new Vuex.Store({
        state:{
          loading: false,
          todoList : [
            {id:1,name:'11'},
            {id:2,name:'22'},
            {id:3,name:'33'},
          ]
        },
        getters:{   <----- 增加getter属性
            getNameList(state,getters){  <----- 获取修饰后的todoList,第一个参数state为必要参数,必须要写在形参上,第二个参数getters为可选参数,如果你在本getter方法中还想使用其他的getter方法,就要加上这个参数
               let saveList = JSON.parse(JSON.stringify(state.todoList)) // 深copy出来一份,防止污染原state中的
      
               return saveList.filter(item=>{
                   item.name += ' are you ok'
                   item.id += '---'+getters.getListLength  <---- 演示在getters方法中再使用别的getters方法
                   return item
               })
            },
            getListLength(state) {  <----- 返回数组的长度
                return state.todoList.length+''
            },
            getItemById:(state) => (id)=>{  <----- 示例怎么返回一个函数出去,可以传参进来(id)
             return state.todoList.find(item=>{
                return item.id === id
             })
            },
        }
      })
      
    • 组件中使用
      mounted() {
          console.log(this.$store.getters.getNameList);
          console.log(this.$store.getters.getItemById(2));  <----- 注意不是$store.state了,是$store.getters
      }
      
image.png
  • 🤖 官方建议
    • 官方建议我们可以使用mapGetters去解构到计算属性中,就像使用mapState一样,就可以直接使用this调用了,就像下面这样:
      import {mapState,mapGetters} from 'vuex'
      export default {
        name: 'App',
        computed:{
          getTodoList(){
            return this.$store.state.todoList
          },
          ...mapState({
            aliasName:'loading'
          }),
          ...mapGetters([
            'getItemById'
          ])
        },
        mounted() {
          console.log(this.getItemById(2));
        }  
      }
      
    • 当然你也可以取别名,取外号,就像下面这样:
      ...mapGetters({
          aliasName:'getItemById'
      })
      

🤗 OK,当你看到这里,你已经吧Getter用起来了,你也能明白在什么时候应该用到getters,你可以通过计算属性访问(缓存),也可以通过方法访问(不缓存),你甚至可以再getters的方法里面再调用getters方法,当然你也实现了像state那样,使用mapGetters解构到计算属性中,这样你就可以很方便的使用getters啦!

😎 读取值的操作我们有 " 原生读 (state) " 和 " 修饰读 (getters) ",接下来我们就要介绍怎么设置值了,设置值是一个小难点,希望你不要放弃!接下来,带你使用vuex的 Mutation

相关文章

网友评论

      本文标题:2.手把手教你使用Vuex - 修饰读:"Getter"

      本文链接:https://www.haomeiwen.com/subject/nommdhtx.html