Vuex入門學習之Getter詳解
一、引入Getter
有時候我們需要從 store 中的 state 中派生出一些狀態(tài)，例如對列表進行過濾并計數(shù)：
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}如果有多個組件需要用到此屬性，我們要么復制這個函數(shù)，或者抽取到一個共享函數(shù)然后在多處導入它——無論哪種方式都不是很理想。
Vuex 允許我們在 store 中定義 getter （可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當它的依賴值發(fā)生了改變才會被重新計算。
getter 就類似于我們定義 java 實體類中的 getter方法。
Getter 接受 state 作為其第一個參數(shù)：
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
二、通過屬性訪問 getter
Getter 會暴露為 store.getters 對象，你可以以屬性的形式訪問這些值：
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Getter 也可以接受其他 getter 作為第二個參數(shù)：
getters: {
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // -> 1
我們可以很容易地在任何組件中使用它：
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
注意，getter 在通過屬性訪問時是作為 Vue 的響應式系統(tǒng)的一部分緩存其中的。
三、通過方法訪問
你也可以通過讓 getter 返回一個函數(shù)，來實現(xiàn)給 getter 傳參。在你對 store 里的數(shù)組進行查詢時非常有用。
getters: {
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
四、mapGetters 輔助函數(shù)
mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計算屬性：
import { mapGetters } from 'vuex'
export default {
computed: {
// 使用對象展開運算符將 getter 混入 computed 對象中
...mapGetters([
'doneTodosCount',
'anotherGetter'
])
}
}
如果你想將一個 getter 屬性另取一個名字，使用對象形式：
...mapGetters({
// 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
到此這篇關于Vuex入門學習之Getter詳解的文章就介紹到這了,更多相關Vuex的Getter內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue與Node.js通過socket.io通信的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue3使用postcss-px-to-viewport實現(xiàn)頁面自適應
postcss-px-to-viewport 是一個 PostCSS 插件,它可以將 px 單位轉(zhuǎn)換為視口單位,下面我們就看看如何使用postcss-px-to-viewport實現(xiàn)頁面自適應吧2024-01-01
一文了解vue-router之hash模式和history模式
這篇文章主要介紹了一文了解vue-router之hash模式和history模式,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue監(jiān)聽dom大小改變案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue中v-model、v-bind和v-on三大指令的區(qū)別詳解
v-model和v-bind都是數(shù)據(jù)綁定的方式,下面這篇文章主要給大家介紹了關于vue中v-model、v-bind和v-on三大指令的區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關于Vue單頁面骨架屏實踐的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-12-12
Markdown?編輯器作為一種輕量級文本格式,已被廣泛應用于博客、文檔編輯、評論系統(tǒng)等場景,下面這篇文章主要介紹了Vue3前端適配Markdown格式問題及最佳解決方案,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-06-06
這篇文章主要介紹了element?Drawer?抽屜無法渲染問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue中的路由導航守衛(wèi)導航解析流程,正如其名，vue-router 提供的導航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導航。這里有很多方式植入路由導航中：全局的，單個路由獨享的，或者組件級的2023-04-04
Vue中el-tree樹全部展開或收起的實現(xiàn)示例
本文主要介紹了Vue中el-tree樹全部展開或收起的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07