[Vue]Vuex工作原理

0x01 - 工作原理：

0、State：

• 它是一个对象，里面存储的是 N 个组件共享的数据。

1、Vue Components：

• 一堆组件，这些组件需要共享 State 中的数据。

2、dispatch()：

• 这是一个 API，当调用它之后，就会进入 Actions 这个步骤。
  参数：
  • ①：执行的函数名，假设这里的函数是 add，然后就会去 Actions 对象中去匹配这个 add 函数。
  • ②：为这个函数参数传递的数据，假设这里的参数是 1。

2.1、Actions：

• 它里面存储的是一个对象，这个对象中，全是函数，这些函数是要我们自己写的，既然在 dispatch() 中选择了 add 函数，那么在这个对象中肯定是要写一个 add 函数的。

• 并且在这个对象中，函数可以接收到两个参数：

  • ①：context -> (上下文)。
  • ②：value -> (就是 dispatch() 传递的第二个参数：1)。
• 然后我们需要在这个函数中，使用 context 属性来调用 commit() 函数。
• 在调用 commit() 函数时，需要为该函数传递两个参数，请看下面。

3、commit()：

• 当使用 context 上下文属性调用 commit() 方法后，就会进入 Mutations 这个步骤。
• 在调用 commit() 函数时，需要为该函数传递两个参数：
  • ①：调用 Mutations 中的哪个函数，肯定是 add。
  • ②：传递的参数，一般就是 Actions 中的 value 属性。

3.1、Mutations：

• 它里面存储的也是一个对象，它存储是也是全是函数，这些函数也是我们自己添加的。
• 我们在 commit() 中选择调用 add 函数，那么该对象中肯定也要有一个 add() 函数的。
• 在这个对象中的方法，也可以接收到两个参数：
  • ①：state对象。
  • ②：value，也就是 commit 传递的第二个属性。
• 然后，我们就可以在这个函数中直接操作 state 对象中的属性了。

4、render：

• 当 State 中的属性值发生变化时，就会重新帮我们解析组件。

5、Actions 和 Mutations 的区别：

• 如果在调用 dispatch() 函数时，我们不知道传递一个什么数据，必须要请求后端的接口才能知道传递什么，那么我们就需要在 Actions 对象中的函数中请求后端接口，然后在调用 commit()。

• 或者我们需要进行延时操作，在500毫秒之后在操作 State 对象中的数据，那么就需要在 Actions 对象中的函数中进行延时操作，在500毫秒之后直接调用 commit() 进行操作 State对象。

• 那么也就发现，如果有逻辑业务层操作的话，都是在 Actions 对象函数中完成业务逻辑。
• 而 Mutations 中的函数，是不要进行业务逻辑的，它负责的就是最终修改 State 中的数据。

• 如果我们知道初始传递一个什么数据，则可以不进行 Actions 这一步，直接调用 commit() 进行 Mutations 这一步进行修改数据即可。

• 并且它们的函数名也应该有所区分，在 Actions 中的函数进行小写，而在 Mutations 中的函数进行大写。

6、总结：

• 如果知道初始数据，并且不需要业务逻辑，则可以让组件直接调用 commit() 函数。

• 如果需要业务处理，则必须让组件调用 dispatch() 函数，然后在通过上下文调用 commit()函数。

• Mutations 这一步骤，才是最终修改 State 数据的步骤。