[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 数据的步骤。

发表评论 / Comment

用心评论~