37.VueJs学习-VueX原理

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

一、核心概念

1.State：

• 定义：存储应用的状态数据，是单一状态树，即一个对象就包含了全部的应用层级状态。
• 作用：组件可以从 state 中获取需要的数据，而不是通过父子组件之间的 props 传递或者事件派发的方式来共享数据，使数据管理更加集中和高效。
• 例如：一个购物车应用中，state 可能包含商品列表、购物车中的商品、用户信息等数据。

2.Getters：

• 定义：可以理解为 store 的计算属性，就像计算属性在组件中的作用一样，getters 可以基于 state 进行计算得到新的数据。
• 作用：对 state 中的数据进行加工处理后返回给组件，也可以接收其他 getters 作为参数，实现更复杂的数据处理逻辑。
• 例如：在购物车应用中，可以通过 getters 计算购物车中商品的总价、已选商品的数量等。

3.Mutations：

• 定义：是更改 Vuex store 中状态的唯一方法，是同步函数。
• 作用：用于修改 state 中的数据，每个 mutation 都有一个字符串的事件类型（type）和一个回调函数（handler），这个回调函数就是用来进行状态更改的实际操作。
• 例如：在购物车应用中，可以定义一个名为 addItemToCart 的 mutation，用于将一个商品添加到购物车的状态中。

4.Actions：

• 定义：类似于 mutation，不同在于 actions 提交的是 mutation，而不是直接变更状态，并且 actions 可以包含任意异步操作。
• 作用：用于处理异步逻辑和复杂的业务逻辑，然后通过提交 mutation 来修改状态。
• 例如：在购物车应用中，从服务器获取商品数据的操作可以放在 action 中，获取到数据后再提交 mutation 将数据添加到 state 中。

二、工作原理

1.组件访问 Vuex 状态：

• 组件通过 this.$store.state.xxx 来访问 state 中的数据。
• 通过 this.$store.getters.xxx 访问 getters 计算得到的数据。

2.组件触发状态变更：

• 组件不能直接修改 state 中的数据，而是通过提交 mutation 来实现状态的变更。例如 this.$store.commit('mutationName', payload)。
   
• 如果涉及异步操作，则先在组件中触发 action，例如 this.$store.dispatch('actionName', payload)。action 内部进行异步操作，完成后提交 mutation 来修改状态。

3.Vuex 内部实现机制：

• Vuex 通过 Vue 的插件机制实现了对 Vue 实例的注入，使得在 Vue 组件中可以通过 this.$store 访问到 Vuex 的 store 对象。
• 当 state 中的数据发生变化时，Vuex 会通知依赖这个数据的组件进行更新，这是通过 Vue 的响应式系统实现的。Vuex 将 state 中的数据包装成响应式对象，当数据发生变化时，Vue 的响应式系统会自动触发相关组件的重新渲染。
• 总之，Vuex 通过集中式的状态管理，使得 Vue.js 应用的状态管理更加清晰、可维护和可预测，尤其适用于中大型复杂应用的开发。