Skip to content

Commit 18286b0

Browse files
committed
Merge pull request vuejs#66 from jbruni/patch-3
getters.md - basic example
2 parents c05ce55 + 6bfef59 commit 18286b0

File tree

1 file changed

+29
-0
lines changed

1 file changed

+29
-0
lines changed

docs/en/getters.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,34 @@
11
# Getters
22

3+
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:
4+
5+
``` js
6+
import Vuex from 'vuex'
7+
8+
const store = new Vuex.Store({
9+
state: {
10+
values: [0, 9, 18]
11+
},
12+
getters: {
13+
total (state) {
14+
return state.values.reduce((a, b) => a + b)
15+
}
16+
}
17+
})
18+
```
19+
20+
Now `store.getters.total` function can be used in a Vue component similarly to state properties:
21+
22+
``` js
23+
export default {
24+
computed: {
25+
total: store.getters.total
26+
}
27+
}
28+
```
29+
30+
### Getters in a Separated File
31+
332
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:
433

534
``` js

0 commit comments

Comments
 (0)