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 数据的步骤。
版权声明:《 [Vue]Vuex工作原理 》为甄雨锋原创文章,转载请注明出处!
最后编辑:2022-2-16 20:02:35