快捷導(dǎo)航

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

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

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

1.設(shè)置gettes 事件

index.js

dict.js

我們在index.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"]), //使用對象展開運(yùn)算符將 getter 混入 computed 對象中
    // 第二種方式 對象形式
    ...mapGetters({
      getterDict: "dict/getterDict",
      getterDictCompare: "dict/getterDictCompare",
    }),
  },
  methods: {},
};
</script>

3.最終頁面示例

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

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

總結(jié)

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

您可能感興趣的文章:

vuex
getters

相關(guān)文章

Vue + Webpack + Vue-loader學(xué)習(xí)教程之功能介紹篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader功能介紹的相關(guān)資料，文中介紹的非常詳細(xì)，相信對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
2017-03-03
vue+Element實(shí)現(xiàn)分頁效果
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
淺談vue引用靜態(tài)資源需要注意的事項(xiàng)
今天小編就為大家分享一篇淺談vue引用靜態(tài)資源需要注意的事項(xiàng)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue項(xiàng)目中使用setTimeout存在的潛在問題及解決
這篇文章主要介紹了Vue項(xiàng)目中使用setTimeout存在的潛在問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vuex狀態(tài)機(jī)的快速了解與實(shí)例應(yīng)用
Vuex是專門為Vuejs應(yīng)用程序設(shè)計(jì)的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機(jī)快速了解與實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下
2021-06-06
vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊流程
自定義指令是對普通DOM元素進(jìn)行的底層操作,它是一種有效的的補(bǔ)充和擴(kuò)展,不僅可以用于定義任何的dom操作,并且是可以復(fù)用的,下面這篇文章主要給大家介紹了關(guān)于vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊流程的相關(guān)資料,需要的朋友可以參考下
2023-02-02
Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文)
這篇文章主要介紹了Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
詳解Vue的options
options顧名思義是選項(xiàng)的意思，或稱為構(gòu)造選項(xiàng)。是在創(chuàng)建vue實(shí)例時(shí)傳入的參數(shù)，是一個(gè)對象。該對象包含哪些屬性？每個(gè)屬性都是什么含義？本篇文章就來帶大家詳細(xì)了解其中的奧秘
2021-05-05
Vue.js中組件中的slot實(shí)例詳解
這篇文章主要介紹了Vue.js中組件中的slot實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-07-07
unplugin-auto-import的配置以及eslint報(bào)錯(cuò)解決詳解
unplugin-auto-import?解決了vue3-hook、vue-router、useVue等多個(gè)插件的自動導(dǎo)入,也支持自定義插件的自動導(dǎo)入,是一個(gè)功能強(qiáng)大的typescript支持工具,這篇文章主要給大家介紹了關(guān)于unplugin-auto-import的配置以及eslint報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下
2022-08-08