38.VueJs学习-pinia原理

Pinia 和 Vuex 都是用于 Vue.js 应用的状态管理库，Pinia 在设计上借鉴了 Vuex 的一些理念同时也有很多创新之处。

一、Pinia 的核心概念

1.Store：

• 定义：Pinia 的核心是一个个的 store 对象，每个 store 代表应用的一部分状态。
• 作用：类似于 Vuex 中的 store，集中管理应用的状态数据。可以包含 state、getters、actions 等属性。
• 例如：一个电商应用可以有一个用户 store 来管理用户信息，一个购物车 store 来管理购物车状态。

2.State

• 定义：存储 store 的状态数据，是一个普通的对象。
• 作用：与 Vuex 的 state 类似，用于存储应用的状态数据，组件可以通过 store 的实例访问 state 中的数据。
• 例如：购物车 store 的 state 可能包含购物车中的商品列表、商品总数、总价等数据。

3.Actions

• 定义：包含异步逻辑和复杂业务逻辑的方法，可以修改 state。
• 作用：与 Vuex 的 actions 类似，用于处理异步操作和复杂的业务逻辑，通过修改 state 来改变应用的状态
• 例如：从服务器获取商品数据并添加到购物车的操作可以放在 actions 中。

4.Getters

• 定义：基于 store 的 state 计算得到新的数据，类似于 Vuex 的 getters。
• 作用：对 state 中的数据进行加工处理后返回给组件，可以依赖其他 getters，实现更复杂的数据处理逻辑。
• 例如：在购物车 store 中，可以有一个 getters 计算购物车中商品的总价。

二、Pinia 的工作原理

1.组件访问 Pinia 状态：

• 组件通过 useStore() 函数获取 store 的实例，然后可以通过 store.state.xxx 访问 state 中的数据，通过 store.getters.xxx 访问 getters 计算得到的数据，通过 store.actions.xxx() 调用 actions 中的方法。

2.状态变更：

• 修改 state 中的数据可以直接通过 store 的实例进行，例如 store.state.xxx = newValue，也可以在 actions 中通过修改 state 来实现状态变更。
• 与 Vuex 不同的是，Pinia 允许直接修改 state，这使得状态变更更加简洁直观。

3.响应式原理：

• Pinia 利用 Vue 的响应式系统来实现状态的自动更新。当 state 中的数据发生变化时，依赖这个数据的组件会自动更新。
• Pinia 对 state 进行了包装，使其成为响应式对象，确保状态的变化能够被 Vue 正确地追踪和更新。

三、Pinia 与 Vuex 的比较及优势

1.语法更简洁：

• Pinia 允许直接修改 state，而 Vuex 需要通过提交 mutation 来修改 state，这使得 Pinia 的状态变更更加直观和简洁。
• Pinia 的 actions 也可以直接修改 state，不需要像 Vuex 那样先提交 mutation 再修改 state。

2.更好的类型支持：

1. Pinia 提供了更好的类型推断支持，可以在使用 store 时更方便地进行类型检查，减少类型错误。

3.模块化设计更灵活：

• Pinia 的 store 可以轻松地进行拆分和组合，每个 store 都是独立的，可以单独导入和使用，使得应用的状态管理更加灵活。

4.支持插件和中间件：

1. Pinia 支持插件和中间件的扩展，可以方便地添加额外的功能，如日志记录、持久化存储等。

总之，Pinia 通过简洁的语法、更好的类型支持和灵活的模块化设计，为 Vue.js 应用的状态管理提供了一种更加高效和便捷的方式。