vuex getters、mapGetters、...mapGetters（三）

目录

getters 作用

getters 类似计算属性

通过属性访问

通过方法访问

mapGetters 辅助函数

---

• getters 是将 state 中派生出的一些状态进行操作，如过滤列表中的元素，计算出满足条件数组项长度
•  getters 是 store 计算属性类似 computed
• getters 接收 state 作为它的第一个参数
• getter 返回值会根据它的依赖被缓存起来，只有当它的依赖值发生改变才会被重新计算
• 访问 getters 中的数据有 2 种方式：
•   1）通过属性的形式访问会被缓存 this.$store.getters
•   2）通过方法的形式访问不会被缓存，可以往 getters 中传值，返回的是一个函数
• mapGetters() 辅助函数，将 store 中的 getters 映射到局部计算属性中

getters 介绍

• getters 是将 state 中派生出的一些状态进行操作
• 如过滤列表中的元素，计算出满足条件数组项长度

// state.js
export default {
  todos: [
    { id: 1, text: '任务一', done: true },
    { id: 2, text: '任务二', done: false }
  ]
}

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

 

getters 类似计算属性

• getters 是 store 计算属性类似 computed
• getters 返回值会根据它的依赖被缓存起来，只有当它的依赖值发生了改变才会被重新计算
• getters 接受 state 作为第一个参数

// getters
export default {
  doneTodos: (state) => {
    return state.todos.filter(todo => todo.done)
  }
}

 

通过属性访问

• getters 暴露为 this.$store.getters，可以以属性形式访问这些值
• getters 通过属性访问是作为 Vue 响应式系统的一部分缓存其中的

{{ $store.getters.doneTodos }} // -> [{ id: 1, text: '任务一', done: true }]

• 组件中使用

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

 

通过方法访问

• 让 getters 返回一个函数实现给 getter 传参
• getters 通过方法访问时，每次都会调用不会缓存结果

getters: {
  // 简写版
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

getters: {
  // 原型版
  getTodoById: function(state){
    return function(id){
      return state.todos.find(todo => todo.id === id)
    }
  }

  // 上面代码也可以写成以下形式
  filterTodos(state: any){
    return (id: any) => {
      return state.todos.filter(item => item.id == id)
    }
  }  
}

this.$store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

 

mapGetters 辅助函数

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

import { mapGetters } from 'vuex'

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

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

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

 Vuex 状态管理模式(一)_taoqidejingling的博客-CSDN博客_vuex状态管理模式Vuex响应式状态管理模式；Vuex安装和使用；Vuex核心；Vuex优势和缺点；https://blog.csdn.net/taoqidejingling/article/details/121221646

Vuex state、mapState、...mapState (二)_taoqidejingling的博客-CSDN博客使用 computed 接收 state 返回的数据，有 4 种方式；子组件可以通过 this.$store.state 访问 store 状态中的值；mapState 辅助函数帮助我们生成计算属性，可以传入一个对象、也可以传入一个数组；对象展开运算符 ...mapState 函数返回的是一个对象，使用工具函数将多个对象合并为一个对象，最终把对象传给 computed 属性；https://blog.csdn.net/taoqidejingling/article/details/121298272 
vuex getters、mapGetters、...mapGetters（三）_taoqidejingling的博客-CSDN博客getter 接收 state 作为他的第一个参数；访问 getter 中的数据有 2 中方式；https://blog.csdn.net/taoqidejingling/article/details/121311301

https://blog.csdn.net/taoqidejingling/article/details/121325206https://blog.csdn.net/taoqidejingling/article/details/121325206

vuex actions、mapActions、...mapActions（五）_taoqidejingling的博客-CSDN博客actions 和 mutations 的区别？actions 函数第一个参数是 context，第二个参数是 payload 外界传入的值；在 method 事件中通过 this.$store.dispatch() 触发，触发传入的参数有 4 种形式；actions 中的函数可以使用对象解构赋值、对象解构赋值无顺序要求：第一个参数解构赋值 {commit, dispath,getters, rootGetters, rootState,state}https://blog.csdn.net/taoqidejingling/article/details/121325999