vuex學習進階篇之getters的使用教程
更新時間：2022年10月19日 15:34:48 作者：Jay丶千玨
getters用于獲取state里的數據,它類似于計算屬性,如果要獲取的數據并沒有發(fā)生變化的話,就會返回緩存的數據,下面這篇文章主要給大家介紹了關于vuex學習進階篇之getters的使用教程,需要的朋友可以參考下
緊接上篇，本片主要講講vuex 中 getters的使用，示例中使用了vuex的modules，getters的使用與vue組件中computed中使用類似，再學習的過程中，注意舉一反三
1.設置gettes 事件
index.js
dict.js
我們在index.js中設置了兩個getters事件，在子模塊dict.js中設置了兩個getters事件
2.使用調用
<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: {
// 第一種形式 數組形式
...mapGetters(["getterAge", "getterAgeCompare"]), //使用對象展開運算符將 getter 混入 computed 對象中
// 第二種方式 對象形式
...mapGetters({
getterDict: "dict/getterDict",
getterDictCompare: "dict/getterDictCompare",
}),
},
methods: {},
};
</script>3.最終頁面示例
getters的優(yōu)點：
此外，使用getters的好處還可以使代碼更加簡潔，對于獲取同樣的數據，直接調用同一個方法即可，不需要每個組件都單獨寫一遍函數，直接調用在getters寫好的方法就可以。
總結
到此這篇關于vuex學習進階篇之getters使用的文章就介紹到這了,更多相關vuex getters的使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue + Webpack + Vue-loader學習教程之功能介紹篇
這篇文章主要介紹了關于Vue + Webpack + Vue-loader功能介紹的相關資料，文中介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要為大家詳細介紹了vue+Element實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
今天小編就為大家分享一篇淺談vue引用靜態(tài)資源需要注意的事項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue項目中使用setTimeout存在的潛在問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vuex是專門為Vuejs應用程序設計的狀態(tài)管理工具,這篇文章主要給大家介紹了關于Vuex狀態(tài)機快速了解與實例應用的相關資料,需要的朋友可以參考下2021-06-06
vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程
自定義指令是對普通DOM元素進行的底層操作,它是一種有效的的補充和擴展,不僅可以用于定義任何的dom操作,并且是可以復用的,下面這篇文章主要給大家介紹了關于vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程的相關資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue2.0學習系列之項目上線的方法步驟(圖文)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
options顧名思義是選項的意思，或稱為構造選項。是在創(chuàng)建vue實例時傳入的參數，是一個對象。該對象包含哪些屬性？每個屬性都是什么含義？本篇文章就來帶大家詳細了解其中的奧秘2021-05-05
這篇文章主要介紹了Vue.js中組件中的slot實例詳解的相關資料,需要的朋友可以參考下2017-07-07
unplugin-auto-import的配置以及eslint報錯解決詳解
unplugin-auto-import?解決了vue3-hook、vue-router、useVue等多個插件的自動導入,也支持自定義插件的自動導入,是一個功能強大的typescript支持工具,這篇文章主要給大家介紹了關于unplugin-auto-import的配置以及eslint報錯解決的相關資料,需要的朋友可以參考下2022-08-08