Vuex笔记（三）——state_state => state

作者：Gausst松鼠会 | 2024-03-17 15:54:39

踩

state => state

在Vuex中，我们会发现所有的状态都包含在了一个对象state中。即Vuex使用单一状态树。

那我们在Vue组件中获取和展示状态的方法，在上一个笔记里已经有写过：

// 在vue实例中引入store
const vm = new Vue({
  el: "#app",
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  // 在template中，使用插值表达式
  template: `<div>{{ count }}</div>`,
  // 使用计算属性或其他钩子来获取状态
  computed: {
    count () {
        return this.$store.state.count
    }
  }  
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

当然官方也提供了辅助函数mapState，它会帮助我们生成计算属性：

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

// 那么在一般的页面中，我们直接使用Vuex.mapState,当然我们一般也不会这样用
computed: Vuex.mapState({
    // ...
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

我们接上一章笔记的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vuex</title>
</head>
<body>
    <h3>vuex开始---state</h3>
    <div id="app"></div>
</body>
</html>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vuex/2.2.0/vuex.js"></script>
<script type="text/javascript">
    // 创建一个store
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        // 相当于vue中的method，里面定义的是一个函数方法
        mutations: {
            increment (state) {
                state.count++
            }
        }
    })

    // 创建一个组件
    const Counter = {
        template: `<div>{{ count }}</div>`,
        computed: {
            count () {
                return this.$store.state.count
            }
        }
    }

    let vm = new Vue({
        el: '#app',
        // 将 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件中
        store,
        data () {
            return {
                count: 1,
                localCount: 2
            }
        },
        components: {
            Counter
        },
        template: `
            <div @click="changeState">
                <p>这是{{ countPlusLocalState }}</p>
                <p>这是{{ countstore }}</p>
                <p>这是{{ countAlias }}</p>
                <counter></counter>
            </div>
        `,
        methods: {
            // 触发事件后提交increment事件，从而改变仓库中的值
            changeState () {
                store.commit('increment')
                console.log(store.state.count)
            }
        },
        /*
            由于Vuex的状态存储是响应式的，从store实例中读取状态最简单的方法就是在 计算属性中返回某个状态。(这个方法是没有在vue中将状态从根组件“注入”到每个子组件中去)
            每当store.state.count变化的时候，都会重新求取计算属性，并且触发更新相关联的DOM。
            然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用state的组件中需要频繁地导入，并且在测试组件时需要模拟状态。
            在使用上面的store选项后，可以通过调用this.$store来获取状态。
        */

        /*
            当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。在这里我们使用mapState辅助函数帮助我们生成计算属性。
            当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
            使用mapState
        */
        computed: Vuex.mapState({
            // 箭头函数可使代码更简练
            countstore: state => state.count,

            // 传字符串参数 'count' 等同于 `state => state.count`
            countAlias: 'count',

            // 为了能够使用 `this` 获取局部状态，必须使用常规函数
            countPlusLocalState (state) {
                return state.count + this.localCount
            }
        })
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/256897