美文网首页前端
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状态管理模式

    Vuex是什么? Vuex是一个专为Vue.js应用程序开发的状态管理模式Vuex是全局的状态管理 Vuex用来做...

  • Vue知识总结(2)

    Vuex状态管理 Vuex是专门为Vue应用程序提供的状态管理模式,每个Vuex应用的核心是store(仓库),即...

  • vuex二次总结

    Vuex状态管理 每个Vuex应用的核心是store(仓库)Vuex是专门为Vue应用程序提供的状态管理模式,每个...

  • Vue2技术栈归纳与精粹(下篇)

    Vuex状态管理 Vuex是专门为Vue应用程序提供的状态管理模式,每个Vuex应用的核心是store(仓库),即...

  • vuex状态管理:vuex

    什么是vuex? vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组...

  • 15-Vuex基础

    Vue之vuex状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 这个Vuex包含以下几...

  • Vue学习笔记(三)

    一. 状态管理 Vuex 1. Vuex使用 Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用...

  • vuex

    Vuex介绍: Vuex官网:http://vuex.vuejs.org/ Vuex是实现数据状态管理的技...

  • vuex基础

    1.vuex是什么? 状态管理模式,集中式存储管理,多组件需要共享状态时使用vuex 1.1状态管理模式 单个组件...

  • vueX是什么?

    官方解释:Vuex时一个Vue.js应用程序开发的状态管理模式 状态管理是什么? 管理什么状态呢? vueX实例格...

网友评论

    本文标题:Vuex状态管理

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