## Vuex Getters
有時,我們可能需要基于 store 中的狀態來計算推導狀態,例如過濾一個項目列表,并對過濾結果進行計數:
~~~
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
~~~
如果多個組件需要用到這個推導后的狀態,那我們就必須到處重復寫該計算屬性函數;或者將其提取到一個公共的工具函數中,并將公共函數多處導入 - 兩者都不太理想。
Vuex 允許我們在 store 定義 “getters” (將它們視為 store 的計算屬性)。getter 函數將接收 state 作為第一個參數:
~~~
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 函數將導出在 store.getters 對象上:
~~~
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
~~~
getter 函數也接收其他 getter 作為第二個參數:
~~~
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
~~~
~~~
store.getters.doneTodosCount // -> 1
~~~
現在我們可以輕松地在任意組件中使用 getter 了:
~~~
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
~~~
### mapGetters 工具函數
mapGetters 工具函數會將 store 中的 getter 映射到局部計算屬性中。
~~~
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用對象擴展操作符把 getter 混入到 computed 中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
~~~
如果你要將 getter 映射為不同的名稱,請使用一個對象:
~~~
mapGetters({
// 映射 this.doneCount 到 store.getters.doneTodosCount
doneCount: 'doneTodosCount'
})
~~~
- 前端新手村
- 前言
- 第1章 遇見Vue.js
- 第一個Vue.js程序
- vue嘗鮮
- 第2章 概念理解
- 漸進式框架
- 虛擬DOM
- MVVM模式
- MVX模式是什么
- 第3章 Vue基礎概覽
- 第4章 Vue內置指令詳解
- vue-text
- vue-html
- v-show
- v-if
- v-else
- v-else-if
- v-for
- v-on
- v-bind
- v-model
- v-pre
- v-cloak
- v-once
- 第5章 基礎demo小練習
- 圖書管理系統
- 頁面布局
- 列表渲染
- 功能實現
- 基于BootStrap+Vuejs實現用戶信息表
- 功能描述
- 布局實現
- 星座判斷
- 第6章 組件
- 什么是組件
- 使用組件
- Prop
- 自定義事件
- 使用Slot分發內容
- 動態組件
- 雜項
- 第7章-過渡
- 過渡效果
- 概述
- 單元素/組件的過渡
- 初始渲染的過渡
- 多個元素的過渡
- 多個組件的過渡
- 列表過渡
- 可復用的過渡
- 動態過渡
- 過渡狀態
- 狀態動畫與watcher
- 動態狀態轉換
- 通過組件組織過渡
- Render函數
- 基礎
- createElement參數
- 使用JavaScript代替模板功能
- JSX
- 函數化組件
- 模板編譯
- 自定義指令
- 簡介
- 鉤子函數
- 鉤子函數參數
- 函數簡寫
- 對象字面量
- Vuex狀態管理
- Vuex是什么?
- Vuex的安裝
- Vuex起步
- data的替代品-State和Getter
- 測試Getter
- Action-操作的執行者
- 測試Action
- 只用Mutation修改狀態
- 測試Mutations
- Vuex的基本結構
- 子狀態和模塊
- 用服務分離外部操作
- Vue-router
- Vue-router是什么
- Vue-router安裝
- 基本用法1
- 基本用法2
- Vue-cli
- Vue中的Node.js
- Vue中的npm、cnpm
- Vue中的webpack
- 安裝
- 基本使用
- 模板
- 全局API
- Vue.extend
- Vue.nextTick
- Vue.set
- Vue.delete
- Vue.directive
- Vue.filter
- Vue.component
- Vue.use
- Vue.mixin
- Vue.compile
- 附錄
- 相關網站
- 尤雨溪
- 第10章 webpack
- webpack安裝
- webpack基本使用
- webpack命令行
- webpack配置文件
- 單頁面應用SPA
- 第1章 Vue.js簡介
- 1.1 Vue.js簡介
- 1.1.1 Vue.js是什么
- 1.1.2 為什么要用Vue.js
- 1.1.3 Vue.js的發展歷史
- 1.1.4 Vue.js與其他框架的區別
- 1.2 如何使用Vue.js
- 1.2.1 第一個Vue.js程序
- 1.2.2 Vue.js小嘗鮮
- 1.3 概念詳解
- 1.3.1 什么是漸進式框架
- 1.3.2 虛擬DOM是什么
- 1.3.3 如何理解MVVM
- 第2章 基礎概覽
- 2.1 Vue實例
- 2.1.1 構造器
- 2.1.2 屬性與方法
- 2.1.3 實例生命周期
- 2.1.4 生命周期圖示
- 2.2 模板語法
- 2.2.1 插值
- 2.2.2 指令
- 2.2.3 過濾器
- 2.2.4 縮寫
- 第3章 Class與Style的綁定
- 第4章 模板渲染
- 第5章 事件詳解
- 第6章 表單控件綁定
- 第7章 指令詳解
- 7.1 內部指令
- 7.2 自定義指令
- 7.3 指令的高級選項
- 第8章 計算屬性
- 第9章 過濾器
- 第10章 組件
- 10.1 什么是組件
- 10.2 注冊組件
- 10.3 組件選項
- 10.4 組件間的通信
- 10.5 內容分發
- 10.6 動態組件