Vue学习笔记-Vuex介绍

一、什么是vuex？

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
• Vuex 使用单一状态树, 用一个对象就包含了全部的应用层级状态。
• 每个应用将仅仅包含一个 store 实例。
• Vuex 的状态存储是响应式的.

官方提供了一个Vue的调试工具vue-devtools,它里面也集成了Vuex，方便我们调试。

下图为vue-devtools安装以后的示例：

WechatIMG75.jpeg

二、使用场景

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。
  即不同视图之间需要共享一些数据，某个视图里面变更数据以后，其他视图也需要同步共享数据。
  如果开发的不是大型单页应用，使用 Vuex 可能是繁琐冗余的，
  如果开发的是大型单页面应用，那么如何更好的在组件外部管理状态，Vuex 将会成为首选。

三、状态管理模式

1. 下面引用官方的“单向数据流”理念的简单示意图：

WeChatce7a7422973cd0a79c6091f8ffa6cc5b.png

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户操作导致的状态变化。

其实每一个视图是一个单相数据流，见下图的对应关系：

WechatIMG78.png

2.Vuex 的状态管理库

引用官方的状态管理库的示意图：

WechatIMG77.png

Vuex主要包含以下这几个：

• state，共享状态的数据源；
• Mutations， 定义修改状态的方法，要求只能使用同步修改，通过Mutations 修改的才能被Devtoolssuo 补货，方便调试
• Actions，定义修改状态的方法, 里面进行一些异步操作， 使用时需要dispatch进行分发；
• Getters，定义一些state相关的计算属性；
• Modules，当管理的状态国语复杂或者臃肿的，可以使用这个属性分模块导入

具体如何使用这几个将在下一篇介绍！