Vuex笔记（三）——state

本是古典何须时尚 2021-08-13 12:52 493阅读 0赞

在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
        }
      }  
    })

当然官方也提供了**辅助函数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({ 
        // ...
    })

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

<!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>