Showing
2 changed files
with
106 additions
and
3 deletions
post-reading.md
0 → 100644
| 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 | + |
-
Please register or login to post a comment