From ff6b35a44e3490e787172905bbbc616eca328547 Mon Sep 17 00:00:00 2001 From: J Bruni Date: Sun, 28 Feb 2016 14:59:36 -0300 Subject: [PATCH 1/2] getters.md - basic example Prepended a basic example before getting a bit more advanced... --- docs/en/getters.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/docs/en/getters.md b/docs/en/getters.md index 5d1579af3..e072caa49 100644 --- a/docs/en/getters.md +++ b/docs/en/getters.md @@ -1,5 +1,34 @@ # Getters +Each getter is a function used to transform and compose the store data into a consumable format, either for the UI or another purpose. It returns a value computed from the store state: + +``` js +import Vuex from 'vuex' + +const store = new Vuex.Store({ + state: { + values: [0, 9, 18] + }, + getters: { + total (state) { + return state.values.reduce((a, b) => a + b) + } + } +}) +``` + +Now `store.getters.total` function can be used in a Vue component similarly to state properties: + +``` js +export default { + computed: { + store.getters.total + } +} +``` + +### Getters in a Separated File + It's possible that multiple components will need the same computed property based on Vuex state. Since computed getters are just functions, you can split them out into a separate file so that they can be shared in any component via the store: ``` js From 6bfef59cf661e2c8595fac103143a8b95c717913 Mon Sep 17 00:00:00 2001 From: J Bruni Date: Mon, 29 Feb 2016 10:23:21 -0300 Subject: [PATCH 2/2] getters.md - basic example fix --- docs/en/getters.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/getters.md b/docs/en/getters.md index e072caa49..f3b68ec34 100644 --- a/docs/en/getters.md +++ b/docs/en/getters.md @@ -22,7 +22,7 @@ Now `store.getters.total` function can be used in a Vue component similarly to s ``` js export default { computed: { - store.getters.total + total: store.getters.total } } ```