vue3.x中vuex的getter

Getter会暴露为store.getters对象，我们可以以属性的形式访问这些值，让我们在开发中更加的高效，下面我们一起来学习吧。

Getter定义方法

import { createStore } from 'vuex'
const store = createStore({

  state(){
    return {
      todos:[
        {id:1,tetx:'一条河',done:true},
        {id:2,tetx:'一条大河',done:false},
      ]
    }
  },
  mutations:{
  },
  getters:{
    doneTodos:state=>{
      return state.doneTodos.filter(todo=>todo.done)
    }
  }
})

export default store;

getter访问方法一

store.getters.doneTodos    // [ { "id": 1, "tetx": "一条河", "done": true } ]

getter访问方式二在计算属性computed里面获取

computed:{
  donesCount(){
      return this.$store.getters.doneTodos  // [ { "id": 1, "tetx": "一条河", "done": true } ]
    }
  })
},

利用Getter的辅助函数mapGetters获取

//引入 mapGetters 函数
 
import {mapGetters} from 'vuex'
export default {
  name: 'App',
  components: {
  },
  data(){
    return{
    }
  },
  computed:{
  // 获取getter里面的函数 doneTodos
    ...mapGetters(['doneTodos']), // [ { "id": 1, "tetx": "一条河", "done": true } ]
  })

上面就是关于getter获取state里面的值的方法，你看懂学会了吗？