vue状态管理模式vuex-Getter

Getter简介

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，只有当它的依赖值发生了改变才会被重新计算。不过从 Vue 3.0 开始，getter 的结果不再像计算属性一样会被缓存起来。
Getter 接受 state 作为其第一个参数，可以接受其他 getter 作为第二个参数。

  const store = createStore({
    state: {
      listArr: [
        {id: 1, name: 'first', status: true},
        {id: 2, name: 'two', status: false}
      ]
    },
    getters: {
      // 第一个参数
     handleListArr (state) {
        return state.listArr.filter( item => item.status)
      }
      // 第二个参数
      handleListArr (state, getters) {
        return getters.listArr.length
      }
    }
  })

Getter访问方式

1.通过属性访问
Getter会暴露为store.getters对象，可以通过属性方式访问

  store.getters.listArr
  // [{id: 1, name: 'first', status: true},{id: 2, name: 'two', status: false}]

getters: {
      handleListArr (state, getters) {
        return getters.listArr.length
      }
 }

可以在组件中使用getters

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

2.通过方法访问
可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。

getters: {
   getListById: (state) => (id) => {
      return state.listArr.find(item => item.id == id)
    }
}

在组件中使用

computed: {
  handleListArr () {
    return this.$store.getters.listListArr(2)
  }
}

注：getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

辅助函数mapGetters

将store中的getter映射到局部计算属性

import { mapGetters } from 'vuex'
export default {
  computed: {
    // 使用对象展开运算符将getter混入computed对象中
    ...mapGetters([
      'handleListArr'
    ])
  }
}

如想把getter属性取另外名称，可使用对象方式：

...mapGetters({
  // 把this.handleList映射为this.$store.getters.handleListArr
  handleList: 'handleListArr'
})