位置:首页 > web前端 > vue

vue3.x中vuex的getter

dearweb 发布:2021-08-15 11:28:28阅读:

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里面的值的方法,你看懂学会了吗?

24人点赞 返回栏目 提问 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言(问题紧急可添加微信 xxl18963067593) 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

本刊热文
网友在读
手机扫码查看 手机扫码查看