Hooke

no message

1 +#### Distinguish helper
2 +
3 +###### *mapState*
4 +
5 +> 读取state中的值进行操作, 不对 state本身进行计算.
6 +
7 +```javascript
8 +// 单独计算
9 +computed: mapState({
10 + count: state => state.count,
11 + countAlias: 'count', // 别名
12 + countPlusLocalState (state) {
13 + return state.count + this.localCount // 结合本地值进行计算
14 + }
15 +})
16 +// 计算属性名称 === 状态子树名称
17 +computed: mapState([
18 + 'count'
19 +])
20 +// 混合计算
21 +computed: {
22 + localComputed () { /* ... */},
23 + ...mapState({
24 + count: state => state.count,
25 + countAlias: 'count', // 别名
26 + countPlusLocalState (state) {
27 + return state.count + this.localCount // 结合本地值进行计算
28 + }
29 + })
30 +}
31 +```
32 +
33 +###### mapGetters
34 +
35 +> 混合计算时:使用*对象扩展操作符*, 名称相同时传入同名数组, 映射不同名称时, 传入对象键值对, 键值对可以操作参考上面示例混合计算.
36 +
37 +```javascript
38 +// 混合计算
39 +computed: {
40 + localComputed () { /* ... */},
41 + ...mapGetters([
42 + 'doneTodosCount',
43 + 'anotherGetter'
44 + ])
45 +}
46 +// 映射不同名称
47 +mapGetters({
48 + doneCount: 'doneTodosCount'
49 +})
50 +```
51 +
52 +##### Mutations
53 +
54 +###### Payload
55 +
56 +```javascript
57 +mutations: {
58 + increment (state, payload) {
59 + state.count += payload.amount
60 + }
61 +}
62 +```
63 +
64 +```javascript
65 +//
66 +store.commit('increment', {
67 + amount: 10
68 +})
69 +// 对象风格
70 +store.commit({
71 + type: 'increment',
72 + amount: 10
73 +})
74 +```
75 +
76 +###### mapMutations
77 +
78 +```javascript
79 +methods: {
80 + ...mapMutations([
81 + 'increment' // 映射 this.increment 到 this.$store.commit('increment')
82 + ]),
83 + ...mapMutations({
84 + add: 'increment' // 映射 this.add 到 this.$store.commit('increment')
85 + })
86 +}
87 +```
88 +
89 +###### Const Named Mutation
90 +
91 +```javascript
92 +// mutation-types.js
93 +export const SOME_MUTATION = 'SOME_MUTATION'
94 +```
95 +
96 +```javascript
97 +// store.js
98 +import { SOME_MUTATION } from './mutation-types'
99 +mutations: {
100 + [SOME_MUTATION] (state) {
101 + // change state
102 + }
103 +}
104 +```
105 +
...@@ -8,9 +8,7 @@ ...@@ -8,9 +8,7 @@
8 </template> 8 </template>
9 9
10 <script> 10 <script>
11 -import { 11 +import { mapState } from 'vuex'
12 - mapState
13 -} from 'vuex'
14 12
15 export default { 13 export default {
16 data() { 14 data() {
......