Vuex的设计理念Vuex是一个专门为Vue.js应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件

Vuex是一个专门为Vue.js应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

状态与数据

数据：是提供给视图一个显示出来的依据，数据可以被改变，在响应式程序中，数据的改变会引起视图的变化。

Vuex的设计本身就是基于redux，只是重新发展出来的一个库，它的核心理念并没有逃离redux的思想。redux把所有统一管理的这部分数据叫作状态。

为什么叫状态？其实数据的综合管理反映的是视图到底处于何种的静态状况。而每一个所谓的数据状态改变之后，实际上最终都是要使得视图发送改变。

状态的改变不一定仅仅与视图变化相关，还可以与其他的状态或数据相关，即计算属性。

也就是说状态的改变会引起其他的数据以及视图发生变化，因此，在一个综合管理的情况下，我们将综合管理的东西叫作状态。

Vuex将各个组件所需要的状态综合在一起统一管理，即有统一的触发、更改状态的方法，又统一的状态更改以后形成视图变化的一种方案。

Vuex的状态管理模式实际上就是redux中的中央状态管理器。

所有的组件需要统一管理的数据全部放在Vuex的仓库中统一进行管理，并且称这个管理的数据为状态，其实就是应用状态。

组件内部的data实际叫作视图数据。

下图是对于中央状态管理的一个最基本的严格流程。

中央状态管理器包含以下几个部分：

View会触发一个Actions。

在中央状态管理的机制下，所有变更state的方案都叫做行为。

下图是更为详细的中央状态管理流程图，状态管理应用包含以下几个方面：

Vue Components: Vue组件
Actions：行为
Backend API：后端API，一般指异步操作，例如请求数据。
Mutations：变更。是一个仅仅完成修改state任务的函数。一个action会触发一个变更，变更执行，state变化，然后触发render函数变更视图。

在Vue Components需要变更时，首先要调用dispatch（派发）方法，派发一个行为（更改state的行为）。如果在这一步与后端有数据交互，则需要先在这一步中完成，而后端返回的数据通过actions中的commit（发射）调用Mutations里的方法，而Mutations里的方法被调用之后就会去更新state。在state更新完成之后又就会触发render函数并重新渲染Vue Components。

实际上Vuex做的事情，就是图中的虚线框的内容，dispatch、Render其实并不属于Vuex里面的东西，只是Vuex抛出来的一个dispatch方法，这是由component来做的，而Render是由Vue来做的，也就是说Vuex的接口与Vue保持着联系。

Vuex是允许直接在Vue Components组件内部通过commit直接调用Mutations更改state，这也是和redux设计不同点。Vuex为什么要这样去做呢？因为actions并不是必要的，actions主要目的第一个是触发行为，第二个是执行异步，如果我们不需要执行异步操作的话，那么就可以直接跨过actions。
Pinia与Vuex也有所不同，在Pinia中不存在Mutations这个环节，它认为Mutations存在的意义不大，所以在Pinia中是直接通过actions -> state的过程。