vuex中getters的基本用法解讀
更新時間：2022年09月06日 15:44:13 作者：青淺l
這篇文章主要介紹了vuex中getters的基本用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
getters的基本用法解讀
一、getter 定義
Vuex允許我們在store中定義"getter" ，用于對state中存儲的數據進行過濾操作。
就像vue生命周期中的computed一樣，getter的返回值 會根據它的依賴被緩存起來，且只有當它的依賴值發(fā)生了改變才會被重新計算
二、使用方法
1、通過屬性訪問
Getter 接受 state 作為其第一個參數：
example:現在需要獲取list：[1,2,3,4,5,6,7,8,9]中大于5的元素
const store = new Vuex.Store({
? ?state:{
? ? ? ?list: [1,2,3,4,5,6,7,8,9]
? ? ? ?} ,
? ? getters: {
? ? ? ? getNumber: state => {
? ? ? ? ? ? retrun state.list.filter(item => item > 5)
? ? ? ? }
? ? } ??
})在.vue中使用
computed:{
? ? getNumber(){
? ? ? ? return this.$store.getters.getNumber
? ? }
}2、通過方法訪問
同樣的數組list 需要根據不同的條件返回不同的數據
通過讓 getter 返回一個函數，來實現給 getter 傳參
const store = new Vuex.Store({
? ?state:{
? ? ? ?list: [1,2,3,4,5,6,7,8,9]
? ? ? ?} ,
? ? getters: {
? ? ? ? getNumber: state => (index) => {
? ? ? ? ? ? return state.list.filter(item => item > index)
? ? ? ? }
? ? } ??
})在.vue中使用
computed:{
? ? getNumber(){
? ? ? ? return this.$store.getters.getNumber(4)
? ? }
}3、依賴于已存在的getters
example: 獲取list中大于5的數字的個數
注意：如果getters返回的是一個方法，不能用這種方式
const store = new Vuex.Store({
? ?state:{
? ? ? ?list: [1,2,3,4,5,6,7,8,9]
? ? ? ?} ,
? ? getters: {
? ? ? ? getNumber: state => {
? ? ? ? ? ? return state.list.filter(item => item > 6)
? ? ? ? },
? ? ? ? getNumberLength: (state, getters) = > {
? ? ? ? ? ? return getters.getNumber.length
? ? ? ? }
? ? } ??
})三、mapGetters輔助函數
mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性：
import { mapGetters } from 'vuex'
export default {
? // ...
? computed: {
? // 使用對象展開運算符將 getter 混入 computed 對象中
? ? ...mapGetters([
? ? ? 'doneTodosCount',
? ? ? 'anotherGetter',
? ? ? // ...
? ? ])
? }
}如果你想將一個 getter 屬性另取一個名字，使用對象形式：
import { mapGetters } from 'vuex'
export default {
? // ...
? computed: {
? ? ...mapGetters({
? ? // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
? ? doneCount: 'doneTodosCount'
? ? })
? }
}四、getters注意事項
1、data中定義的屬性名稱不能和computed中定義的getter名稱相同，否則會報錯
2、vuex中state和getter中可以定義同名屬性，互不干擾
getters的兩種調用方法
getters和state用法相似，有點像vue中里面的data 和computed兩個之間的關系
使用：
state: {
?? ??? ?count:0,
?? ?},?? ?
getters:{
?? ??? ?countAdd(state){
?? ??? ??? ?return state.count + 1
?? ??? ?}
?? ?},方法一
this.$store.getters.xxx?
xxx是getters里面的名稱
方法二
import { mapGetters } from 'vuex'
.....
computed:{
? ? ...mapGetters(['countAdd'])
}以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了關于Element-UI可編輯表格的實現過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue樹表格分頁的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
這篇文章主要介紹了Element el-row el-col 布局組件使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vuex獲取state對象中值的所有方法小結(module中的state)
這篇文章主要介紹了vuex獲取state對象中值的所有方法小結(module中的state)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了vue中el-table實現自動吸頂效果，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue子組件向父組件傳值方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-03-03
Vue是一款流行的前端框架，它提供了一系列的工具和組件，使得開發(fā)者可以更加便捷地創(chuàng)建交互式的Web應用程序，輪播圖是Web應用程序中常見的一種交互式組件，本文將介紹如何使用Vue和第三方組件庫 Element UI實現輪播圖功能,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue cli 3.0通用打包配置代碼,不分一二級目錄，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
詳解vue 動態(tài)加載并注冊組件且通過 render動態(tài)創(chuàng)建該組件
這篇文章主要介紹了vue 動態(tài)加載并注冊組件且通過 render動態(tài)創(chuàng)建該組件,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了vue阻止重復請求實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01