Vuex之getters的使用方法

getters其實就是store的計算屬性，對state裡面的狀態進行過濾處理，用法與元件自身的計算屬性一模一樣。

在store資料夾下的index.js中：

import vuex from 'vuex'

import vue from 'vue'
//1.安裝外掛程式
vue.use(vuex)
const state = ,,,
]}const mutations = {}
const getters = ,
//拿到age大於20的學生
more20stu(state),
//拿到age大於20的學生的個數
more20stulen(state, getters),
//拿到age大於使用者傳進來的age值的學生
moreagestu(state, getters)
}}//2.建立物件
const store = new vuex.store()
export default store;

新建state.js儲存所有的狀態：

export default ,,,

]};

//求count的平方

export function getcount (state)
//拿到age大於20的學生
export function more20stu(state)
//拿到age大於20的學生的個數 第二個引數可以訪問getters
export function more20stulen(state, getters)
//拿到age大於使用者傳進來的age值的學生 如果要傳參，可以return乙個函式
export function moreagestu(state, getters)
}

import vuex from 'vuex'

import vue from 'vue'
import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
//1.安裝外掛程式
vue.use(vuex)
//2.建立物件
const store = new vuex.store()
export default store;

mapgetters工具函式就是將store中的getters對映到區域性計算屬性當中

show.vue:

我認為寫得比較好的（當然有很多寫得好的，這裡只貼一兩個）：

以上如有問題，請指出。

Vue學習筆記 Vuex之Getters

getters只有當資料發生改變時才會重新倍計算 類似於計算屬性 需求 1 獲取uers年齡 age 大於18歲的資料 state getters getnum state,getters 需求 2 獲取uers年齡 age 大於18歲資料的數量 getters getnum state,gette...

說說 Vuex 的 getters 屬性

假設我們在 vuex 中定義了乙個陣列 const store new vuex.store 業務場景希望過濾出大於 5 的數。馬上想到的方法可能的是 在元件的計算屬性中進行過濾 效果 功能雖然實現了，但如果其它元件也需要過濾後的資料，那麼就得把 index.vue 中的計算過濾 複製出來。如果過濾...

vuex狀態管理模式之Getters屬性

getters我們可以理解為store倉庫的乙個計算屬性，它的作用主要是用來派生出一些新的狀態。比如我們要把state狀態的資料進行一次對映或者篩選，再把這個結果重新計算並提供給元件使用。舉個例子 此時，getters會暴露出乙個store.getters物件，我們就可以在任何元件中使用this.s...