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: {
11 - count () {
12 - return this.$store.state.count
13 } 17 }
14 }, 18 },
15 - mounted () {}, 19 + computed: mapState({
20 + // 箭头函数可以让代码非常简洁
21 + count: state => state.count,
22 + // 传入字符串 'count' 等同于 `state => state.count`
23 + countAlias: 'count',
24 + // 想访问局部状态,就必须借助于一个普通函数,函数中使用 `this` 获取局部状态
25 + countPlusLocalState (state) {
26 + return state.count + this.localCount
27 + }
28 + }),
29 + mounted() {},
16 methods: {}, 30 methods: {},
17 components: {} 31 components: {}
18 } 32 }
......