快捷導(dǎo)航

vuex學(xué)習(xí)進(jìn)階篇之getters的使用教程

更新時(shí)間：2022年10月19日 15:34:48 作者：Jay丶千玨

getters用于獲取state里的數(shù)據(jù),它類(lèi)似于計(jì)算屬性,如果要獲取的數(shù)據(jù)并沒(méi)有發(fā)生變化的話(huà),就會(huì)返回緩存的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vuex學(xué)習(xí)進(jìn)階篇之getters的使用教程,需要的朋友可以參考下

1.設(shè)置gettes 事件

index.js

dict.js

我們?cè)趇ndex.js中設(shè)置了兩個(gè)getters事件，在子模塊dict.js中設(shè)置了兩個(gè)getters事件

2.使用調(diào)用

<template>
  <div>
    <div>
      <div>{{ $store.getters.getterAge }}</div>
      <div>{{ $store.getters.getterAgeCompare(18) }}</div>
      <div>{{ $store.getters.getterAgeCompare(10) }}</div>
      /
      <div>{{ getterAge }}</div>
      <div>{{ getterAgeCompare(18) }}</div>
      <div>{{ getterAgeCompare(10) }}</div>
    </div>
    -----------------------------------------------------------------------------
    <div>
      <div>{{ $store.getters["dict/getterDict"] }}</div>
      <div>{{ $store.getters["dict/getterDictCompare"](1) }}</div>
      <div>{{ $store.getters["dict/getterDictCompare"](2) }}</div>
      <div>{{ $store.getters["dict/getterDictCompare"](3) }}</div>
      /
      <div>{{ getterDict }}</div>
      <div>{{ getterDictCompare(1) }}</div>
      <div>{{ getterDictCompare(2) }}</div>
      <div>{{ getterDictCompare(3) }}</div>
    </div>
  </div>
</template>
 
<script>
import { mapGetters } from "vuex"; //第二種方式 1.引入
export default {
  data() {
    return {};
  },
  computed: {
    //   第一種形式 數(shù)組形式
    ...mapGetters(["getterAge", "getterAgeCompare"]), //使用對(duì)象展開(kāi)運(yùn)算符將 getter 混入 computed 對(duì)象中
    // 第二種方式 對(duì)象形式
    ...mapGetters({
      getterDict: "dict/getterDict",
      getterDictCompare: "dict/getterDictCompare",
    }),
  },
  methods: {},
};
</script>

3.最終頁(yè)面示例

getters的優(yōu)點(diǎn)：

此外，使用getters的好處還可以使代碼更加簡(jiǎn)潔，對(duì)于獲取同樣的數(shù)據(jù)，直接調(diào)用同一個(gè)方法即可，不需要每個(gè)組件都單獨(dú)寫(xiě)一遍函數(shù)，直接調(diào)用在getters寫(xiě)好的方法就可以。

總結(jié)

到此這篇關(guān)于vuex學(xué)習(xí)進(jìn)階篇之getters使用的文章就介紹到這了,更多相關(guān)vuex getters的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vuex
getters

相關(guān)文章

探索Vue.js component內(nèi)容實(shí)現(xiàn)
這篇文章主要和大家一起探索Vue.js component內(nèi)容實(shí)現(xiàn),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
如何使用vue自定義指令構(gòu)建拖放插件
這篇文章主要介紹了如何使用vue自定義指令構(gòu)建拖放插件，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
2021-04-04
vue通過(guò)url方式展示PDF的幾種方法
小編最近接手的項(xiàng)目中有個(gè)需求,前端顯示后端返回的PDF格式的文件,下面這篇文章主要給大家介紹了關(guān)于vue通過(guò)url方式展示PDF的幾種方法,需要的朋友可以參考下
2023-01-01
Vue watch 偵聽(tīng)對(duì)象屬性詳解
Vue的watch偵聽(tīng)器格式有兩種：方法格式和對(duì)象格式的偵聽(tīng)器，這篇文章主要介紹了Vue watch 偵聽(tīng)對(duì)象屬性相關(guān)知識(shí),需要的朋友可以參考下
2023-04-04
Vue 利用指令實(shí)現(xiàn)禁止反復(fù)發(fā)送請(qǐng)求的兩種方法
這篇文章主要介紹了Vue 利用指令實(shí)現(xiàn)禁止反復(fù)發(fā)送請(qǐng)求的兩種方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-09-09
vue-cli使用stimulsoft.reports.js的詳細(xì)教程
Stimulsoft?Reports.JS是一個(gè)使用JavaScript和HTML5生成報(bào)表的平臺(tái)。它擁有所有擁來(lái)設(shè)計(jì)，編輯和查看報(bào)表的必需組件。該報(bào)表工具根據(jù)開(kāi)發(fā)人員數(shù)量授權(quán)而不是根據(jù)應(yīng)用程序的用戶(hù)數(shù)量。接下來(lái)通過(guò)本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧
2021-12-12
使用vue制作探探滑動(dòng)堆疊組件的實(shí)例代碼
探探的堆疊滑動(dòng)組件起到了關(guān)鍵的作用，下面就來(lái)看看如何用vue寫(xiě)一個(gè)探探的堆疊組件，感興趣的朋友一起看看吧
2018-03-03
vue使用docxtemplater導(dǎo)出word
docxtemplater?是一種郵件合并工具,以編程方式使用并處理?xiàng)l件、循環(huán),并且可以擴(kuò)展以插入任何內(nèi)容,下面我們來(lái)看看如何使用docxtemplater導(dǎo)出word吧
2025-04-04
vue+bpmn.js實(shí)現(xiàn)自定義流程圖的完整代碼
這篇文章主要介紹了vue+bpmn.js實(shí)現(xiàn)自定義流程圖的完整代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借價(jià)值,需要的朋友參考下吧
2024-03-03
基于vue寫(xiě)一個(gè)全局Message組件的實(shí)現(xiàn)
這篇文章主要介紹了基于vue寫(xiě)一個(gè)全局Message組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08