在Store倉庫裏,state就是用來存放數據,若是對數據進行處理輸出, 比如數據要過濾,一般我們可以寫到computed中。但是如果很多組件都使用這個過濾後的數據,我們是需要把這個數據抽提出來共享 這就是getters存在的意義。 我們可以認爲,【getters】是store的計算屬性。
state
getter
Getter 接受 state 作爲其第一個參數:
二.操作 通過屬性訪問,通過方法訪問:
在store\store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//創建一個對象來保存應用啓動時的初始狀態
state:{
// 應用啓動時, count置爲0
count:0,
todos: [
{ id: 1, text: '標題1', done: true },
{ id: 2, text: '標題2', done: false },
{ id: 3, text: '標題3', done: true }
]
},
getters: {
doneTodos: state => {//通過方法訪問
return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {//通過屬性訪問
return getters.doneTodos.length
}
}
})
veuDemo.vue
<template>
<div>
<P>通過屬性訪問:{{doneTodosCount}}</p>
<P>通過方法訪問:{{todos}}</p>
</div>
</template>
<script>
/*
1.mapState 輔助函數
當映射的計算屬性的名稱與 state 的子節點名稱相同時,
我們也可以給 mapState 傳一個字符串數組
*/
import { mapState } from 'vuex'
export default {
computed:{
todos:function() { //通過方法訪問
return this.$store.getters.doneTodos;
},
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
}
</script>
通過屬性訪問:2通過方法訪問: [{ id: 1, text: '標題1', done: true },{ id: 2, text: '標題2', done: false}]
<template>
<div>
<h4>測試1:Count is {{count}}</h4>
<P>通過屬性訪問:{{doneTodosCount}}</p>
<P>通過方法訪問:{{doneTodos}}</p>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
computed:{
count(){
return this.$store.state.count
},
...mapGetters([
'doneTodos',
'doneTodosCount'
])
}
}
</script>
效果同上。分析:1...mapGetters表示// 使用對象展開運算符將 getters 混入 computed 對象中
2.mapGetters裏面的都是store.js裏面的getters的方法名
mutation
action