Vuex 學習3 核心概念Getter

教程來自vuex官網教程：

有時候我們需要從 store 中派生出一些狀態，例如對列表進行過濾並計數：

computed:
}

如果有多個元件需要用到如此多個屬性，我們要麼賦值這個函式，或者抽取乙個到共享函式然後在多處匯入它——無論哪種方法都是很不理想的。

vuex 允許我們在 store 中定義「getter」（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。

getter 接受 state 作為其第乙個引數：

import vue from
'vue'
;import vuex from
'vuex'
;vue.
use(vuex)
;const state =,,
]};const mutations =
,reduce
(state)
}export
default
newvuex.store(}
)

你也可以通過讓 getter 返回乙個函式，來實現給 getter 傳參。在你對 store 裡的陣列進行查詢時也非常有用。

import vue from
'vue'
;import vuex from
'vuex'
;vue.
use(vuex)
;const state =,,
]};const mutations =
,reduce
(state)
}export
default
newvuex.store(,
}})

在外部通過 store 直接呼叫即可：

$store.getters.
gettodobyid(2
)

與stategetters類似，都是將 store 中的 getter 對映到區域性計算屬性中，同樣可以使用物件運算展開符mapgetters對映的 getter 展開到vue例項的區域性計算屬性中。

>
>
/>
>
}h3>
>
@click
="$store.commit('add')"
>
增加button
>
p>
>
@click
="$store.commit('reduce')"
>
減少button
>
p>
/>
>
這裡是 getter 屬性的測試h3
>
>
donetodos: }p
>
>
donetodoscount: }p
>
>
gettodobyid: }p
>
div>
template
>
>
import
from
'vuex'
;export
default),
...mapgetters([
'donetodos'
,'donetodoscount'
,'gettodobyid',]
)},}
script
>

如果你想將乙個 getter 屬性取另乙個名字，使用物件形式

mapgetters
()

以下是乙個例子，首先是 vuex 的倉庫檔案：

import vue from
'vue'
;import vuex from
'vuex'
;vue.
use(vuex)
;const state =,,
]};const mutations =
,reduce
(state)
}export
default
newvuex.store(,
gettodobyid:
(state)
=>
(id)
=>}}
)

然後是用來展示倉庫中存有狀態的vue元件：

>
>
/>
>
}h3>
>
@click
="$store.commit('add')"
>
增加button
>
p>
>
@click
="$store.commit('reduce')"
>
減少button
>
p>
/>
>
這裡是 getter 屬性的測試h3
>
>
donetodos: }p
>
>
donetodoscount: }p
>
>
gettodobyid: }p
>
div>
template
>
>
import
from
'vuex'
;export
default),
...mapgetters([
'donetodos'
,'donetodoscount'
,'gettodobyid',]
)},// computed: mapstate(['count']),
}script
>

最後是結果：

Vuex 學習6 核心概念Module

教程來自vuex官網和技術胖教程模組組一般不用再專案較小的情況由於使用單一狀態數，醫用的所有狀態都會幾種到乙個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。為了解決以上問題，vuex 允許我們將 store 分割成模組 module 每個模組擁有自己的 state ...

Vuex核心概念Mutation Action

newvuex.store mutations commit increment mutations commit increment 10 mutations commit increment commit 當需要在物件上新增新屬性時，你應該以新物件替換老物件。例如，利用 stage 3 的物件...

Vuex的核心概念

state 提供唯一的公共資料源，所有共享的資料都要統一放到 store 的 state 中進行儲存。建立store資料來源，提供唯一公共資料 const store newvuex.store 1.1 元件訪問 state 中資料的第一種方式 this store.state.全域性資料名稱1.2...

Vuex 學習3 核心概念Getter

Vuex 學習6 核心概念Module

Vuex核心概念Mutation Action

Vuex的核心概念

相關推薦