VUEX简单理解

手画草图:
VUEX简单理解
官方图:VUEX简单理解

使用场景1:例如要实现在一个显示组件中提交表单,另一个组件的内容需要随之改变:

没有使用vuex前: (与服务端交互2次)

表单组件提交内容时,我们需要与服务端交互一次(提交);

显示组件更新内容时:我们又需要与服务端交互一次(获取)。

使用vuex后: (与服务端交互1次)

表单组件提交内容时,我们在actions中与服务端交互,然后触发mutation,改变state中的数据状态;

显示组件直接使用getters获取states中的数据。

使用场景2:如果组件只在本地改变数据,不与服务端交互,并且显示组件也要随之改变。那不使用vuex是非常难实现的。

没有使用vuex前:

?

使用vuex后:

触发mutation,改变state中的数据状态;

显示组件直接使用getters获取states中的数据。