美文网首页前端
Vuex状态管理

Vuex状态管理

作者: 六个周 | 来源:发表于2019-01-24 22:58 被阅读99次

    1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。(可以当成全局对象理解。)

    2.Vuex 和单纯的全局对象有两点不同:
    1、Vuex 的状态存储是响应式的
    2、改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

    3.Vuex的核心是store,store包含着应用中大部分的状态 (state)。

    4.一个最简单的store包含state与mutation,可以通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更

    5.重点强调,我们通过提交 mutation 的方式,而非直接改变 store.state.count,是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让我们的意图更加明显,这样你在阅读代码的时候能更容易地解读应用内部的状态改变。

    6.【读数据】State:存储着应用中的所有基础“全局对象”,this.$store.state.XXX可访问到。
    mapState:使用此辅助函数帮助我们生成计算属性,获得多个state值。

    7.【读数据】Getter:从 store 中的 state 中派生出一些状态。
    Getter 接受 state 作为其第一个参数。第二个参数可传值计算。
    Getter 会暴露为 store.getters 对象,可以以属性的形式访问这些值。
    mapGetters 辅助函数同mapState思想理解。

    8.【改数据】Mutation:
    Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。
    可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload)。
    还有一条重要的原则就是要记住 mutation 必须是同步函数

    9.【改数据的提交】Mutation
    在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
    10.【写法】Mutation
    使用常量替代 Mutation 事件类型。

    11.【改数据】Actions
    Action 类似于 mutation,不同在于:
    Action 提交的是 mutation,而不是直接变更状态。
    Action 可以包含任意异步操作。
    Action 通过 store.dispatch 方法触发.
    在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用。

    12【Module】
    应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
    为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。

    相关文章

      网友评论

        本文标题:Vuex状态管理

        本文链接:https://www.haomeiwen.com/subject/bptpjqtx.html