Vuex简单介绍

Vuex是做什么的？

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

状态管理到底是什么?

可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。那么，多个组件就可以共享这个对象中的所有变量属性了。

比如用户的登录状态、用户名称、头像、地理位置信息、商品的收藏、购物车中的物品等等。这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的。

全局单例模式（大管家）

现在要做的就是将共享的状态抽取出来，交给大管家统一进行管理。之后每个视图，按照规定好的规定，进行访问和修改等操作。这就是Vuex背后的基本思想。

注意：

传统的vue是单向数据流（父组件给自组件传递了一个正向穿值的数据  在自组件中修改父组件是不会发生改变的）

传统的父子组件穿值的方式正向/逆向对数据进行传递的时候 ，这种方式非常的脆弱 如果穿值过多会导致代码的耦合性非常的高  后期很难以维护

Vuex状态管理图例

简单案例

1.在src文件夹中创建一个store文件夹，并创建一个index.js文件

2.让所有的Vue组件都可以使用这个store对象，来到main.js文件，导入store对象，并且放在new Vue中，这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了

读取数据this.$store.state.xxxx

通过this.$store.commit('mutation中方法')来修改状态

通过提交mutation的方式，而非直接改变store.state.count。这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值。

vuex核心概念

state单一状态树

1.vuex就是一个仓库，仓库中存放了很多个对象 state这个对象就是数据的存放地，相当于一般vue中的data

2.state里面存储的数据是响应式  组件的数据从state中读取出来之后如果state里面的数据发生了改变  那么以来这条数据的组件也会发生数据的更新。

Getters基本使用

相当于vuex中的计算属性  在对state中的数据在多个组件中使用的时候需要展示出不同的形态

Getters总结:

1. getters是可以对vuex中state数据进行类似计算属性的操作
2. 虽然在组件中可以进行计算属性的操作，但是因为getters设置出来的数据可以在多个组件中重复使用（就是如果这个状态只在一个组件中使用 那么就可以不用getters）

Mutation状态更新

在对vuex中的state数据进行修改的时候，需要把所有的修改逻辑放到mutations(mutations 里面都是一个改变数据的方法的集合)

Mutation主要包括两部分：

• 字符串的事件类型（type）
• 一个回调函数（handler）,该回调函数的第一个参数就是state

在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数。参数被称为是mutation的载荷(Payload)

Mutation提交风格

上面的通过commit进行提交是一种普通的方式。Vue还提供了另外一种风格, 它是一个包含type属性的对象

Mutation响应规则

Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新

通常情况下 , Vuex 要求我们 Mutation 中的方法必须是同步方法 .

Action

Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.

context是什么?

context是和store对象具有相同方法和属性的对象。也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.

在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch

在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject.