Vue2向Vue3过度Vuex核心概念getters

目录

• • 1 核心概念 - getters
  • • 1.定义getters
    • 2.使用getters
  • 2 使用小结

---

1 核心概念 - getters

例如，state中定义了list，为1-10的数组，

state: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}

组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

1.定义getters

  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

2.使用getters

2.1原始方式-$store

<div>{{ $store.getters.filterList }}</div>

2.2辅助函数 - mapGetters

computed: {
    ...mapGetters(['filterList'])
}

 <div>{{ filterList }}</div>

2 使用小结