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

😀 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
    }
    

• 🤖 官方建议
  • 官方建议我们可以使用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！