快捷導(dǎo)航

詳解Vuex中g(shù)etters的使用教程

更新時(shí)間：2022年01月28日 08:56:01 作者：IT利刃出鞘

在Store倉(cāng)庫(kù)里，state就是用來(lái)存放數(shù)據(jù)。如果很多組件都使用這個(gè)過(guò)濾后的數(shù)據(jù)，我們是否可以把這個(gè)數(shù)據(jù)抽提出來(lái)共享？這就是getters存在的意義。我們可以認(rèn)為，getters是store的計(jì)算屬性。本文將具體介紹一下getters的使用教程，需要的可以參考一下

簡(jiǎn)介

說(shuō)明

本文用示例介紹Vuex的五大核心之一：getters。

官網(wǎng)

Getter | Vuex

API 參考 | Vuex

getters概述

說(shuō)明

getters 是Store的計(jì)算屬性，可以對(duì)State進(jìn)行計(jì)算操作。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴(lài)被緩存起來(lái)，且只有當(dāng)它的依賴(lài)值發(fā)生了改變才會(huì)被重新計(jì)算。

雖然組件內(nèi)也可以做計(jì)算屬性，但getters 可以在多組件之間復(fù)用。如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，可以不用getters。

來(lái)源

有時(shí)我們需要從 store 中的 state 中派生出一些狀態(tài)，例如對(duì)列表進(jìn)行過(guò)濾并計(jì)數(shù)：

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

如果有多個(gè)組件需要用到此屬性，我們要么復(fù)制這個(gè)函數(shù)，或者抽取到一個(gè)共享函數(shù)然后在多處導(dǎo)入它（無(wú)論哪種方式都不是很理想）。getter就是為了解決這個(gè)問(wèn)題而產(chǎn)生的。

用法

直接使用

this.$store.getters.計(jì)算屬性名           // 不分模塊
this.$store.getters['模塊名/計(jì)算屬性名'] // 分模塊

mapGetters

import { mapGetters } from 'vuex'
export default {
    computed: {
        // 不分模塊
        ...mapGetters(['計(jì)算屬性名'])
        
        // 分模塊，不重命名計(jì)算屬性
        ...mapGetters('模塊名', ['計(jì)算屬性名'])
        
        // 分模塊，重命名計(jì)算屬性
        ...mapGetters('模塊名', {'新計(jì)算屬性名': '舊計(jì)算屬性名'})
    }
}

示例

代碼

CouterStore.js

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
const counterStore = new Vuex.Store(
    {
        state: {
            count: 10
        },
 
        getters: {
            doubleCount(state) {
                return state.count * 2;
            }
        }
    }
);
 
export default counterStore;

Parent.vue

<template>
  <div class="outer">
    <h3>父組件</h3>
    <component-b></component-b>
  </div>
</template>
 
<script>
import ComponentB from "./ComponentB";
 
export default {
  name: 'Parent',
  components: {ComponentB},
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

ComponentB.vue

<template>
  <div class="container">
    <h3>ComponentB</h3>
    <div>計(jì)數(shù)器的值：{{thisCount}}</div>
    <div>計(jì)數(shù)器的2倍：{{thisDoubleCount}}</div>
  </div>
</template>
 
<script>
export default {
  computed:{
    thisCount() {
      return this.$store.state.count;
    },
    thisDoubleCount() {
      return this.$store.getters.doubleCount;
    },
  }
}
</script>
 
<style scoped>
.container {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

路由（router/index.js）

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
    }
  ],
})