Hooke

mapState 工具功能添加

...@@ -30,9 +30,6 @@ export default { ...@@ -30,9 +30,6 @@ export default {
30 } 30 }
31 }, 31 },
32 computed: { 32 computed: {
33 - count() {
34 - return this.$store.state.count
35 - },
36 isLogin() { 33 isLogin() {
37 return this.$store.state.isLogin 34 return this.$store.state.isLogin
38 } 35 }
......
1 <template lang="html"> 1 <template lang="html">
2 - <div>{{ count }}</div> 2 + <div>
3 + count: {{ count }}
4 + countPlusLocalState: {{countPlusLocalState}}
5 + </div>
3 </template> 6 </template>
4 7
5 <script> 8 <script>
9 +import {
10 + mapState
11 +} from 'vuex'
12 +
6 export default { 13 export default {
7 - data () { 14 + data() {
8 - return {} 15 + return {
9 - }, 16 + localCount: 10
10 - computed: { 17 + }
11 - count () { 18 + },
12 - return this.$store.state.count 19 + computed: mapState({
13 - } 20 + // 箭头函数可以让代码非常简洁
14 - }, 21 + count: state => state.count,
15 - mounted () {}, 22 + // 传入字符串 'count' 等同于 `state => state.count`
16 - methods: {}, 23 + countAlias: 'count',
17 - components: {} 24 + // 想访问局部状态,就必须借助于一个普通函数,函数中使用 `this` 获取局部状态
25 + countPlusLocalState (state) {
26 + return state.count + this.localCount
27 + }
28 + }),
29 + mounted() {},
30 + methods: {},
31 + components: {}
18 } 32 }
19 </script> 33 </script>
20 34
......