可复用的getter

[lazyken]

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。另外getter还可以被复用。先来了解getter

Getter 接受 state 作为其第一个参数：

const store = new Vuex.Store({
  state:{
    todos:[
      {id:1, text:'...', done:true},
      {id:2, text:'...', done:false}
    ]
  },
  getters:{
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
//Getter 会暴露为 store.getters 对象：
console.log(store.getters.doneTodos)//-> [{ id: 1, text: '...', done: true }]

Getter 也可以接受其他 getter 作为第二个参数：

const store = new Vuex.Store({
  state:{
    todos:[
      {id:1, text:'...', done:true},
      {id:2, text:'...', done:false}
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
})
console.log(store.getters.doneTodos)//-> [{ id: 1, text: '...', done: true }]
console.log(store.getters.doneTodosCount)//->1

在组件中使用getters

computed: {
  doneTodosCount() {
    return this.$store.getters.doneTodosCount
  }
}

通过让 getter 返回一个函数，来实现给 getter 传参。在对 store 里的数组进行查询时非常有用。

getters: {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done)
  },
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  },
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
  //es5的语法为
  //getTodoById: (function (state) {
  //   return function (id) {
  //     return state.todos.find(function (todo) {
  //       return todo.id === id;
  //     });
  //   };
  // });
}

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
  ...Vuex.mapGetters([
    'doneTodosCount',
    'anotherGetter',
    // ...
  ])
}

如果你想将一个 getter 属性另取一个名字，使用对象形式：

computed: {
  ...Vuex.mapGetters({
    doneCount: 'doneTodosCount'
  })

<div id="app">
  <p>doneCount = {{this.doneCount}}</p>
  <!-- 1  -->
  <p>doneTodosCount = {{this.doneTodosCount}}</p>
  <!-- 1  -->
  <p>anotherGetter = {{this.anotherGetter}}</p>
  <!-- unknown getter: anotherGetter  -->
</div>