Vuex是做什么的?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
- 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
- Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能
状态管理又是什么呢?
- 状态管理模式、集中式存储管理
- 可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面
- 然后将这个对象放在顶层的Vue实例中,让其他组件可以使用
- 那么多个组件是不是就可以共享这个对象中的所有变量属性了呢
哪些状态可以被管理呢
比如用户的登录状态、用户名称、头像、地理位置信息等等。
比如商品的收藏、购物车中的物品等等。
这些状态信息,我们都可以放在统一的地方,对它进行保存和管理,而且它们还是响应式的。
Vuex核心概念
state
Vuex使用的是单一数据源,在实际应用开发中-如果你的状态信息是保存到多个Store对象中的,那么之后的管理和维护等等都会变得特别困难。所以Vuex也使用了单一数据源来管理应用层级的全部状态。单一数据源能够让我们最直接的方式找到某个状态的片段,而且在之后的维护和调试过程中,也可以非常方便的管理和维护。
Getters
类似于vue中的计算属性computed
可以从store中获取一些state变异后的状态
Mutation
Vuex的store状态的更新唯一方式:提交Mutation,不能进行异步操作,所以提交Mutation都在Action中进行异步操作
Actions
Action类似于Mutation, 我的理解是用来代替Mutation进行异步操作的。
Module
Vue使用单一数据源,也意味着很多状态都会交给Vuex来管理。
当应用变得非常复杂时,store对象就有可能变得相当臃肿。
为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等。