vue3项目中的pinia简单使用方法_用vue3.0写一个简单的利用pinia

这里是使用方法，如果想看安装和引入pinia请前往：引入pinia

pinia官方文档：pinia中文文档

---

一，Pinia的优点：

1. 简单易用：Pinia 提供了简单直观的 API，使得状态管理变得简单和直观。它借鉴了 Vuex 的概念，但在设计上更加简洁和易于理解。

2. 面向未来：Pinia 是专为 Vue 3 开发的，使用了 Vue 3 的新特性和优化。它充分利用了 Vue 3 的响应式系统和编译时优化，提供更好的性能和开发体验。

3. 类型安全：Pinia 提供了 TypeScript 支持，可以在代码中使用类型来定义状态、操作和 getter。这有效地减少了运行时的错误，并提供了更好的代码智能感知和自动补全。

4. 模块化：Pinia 支持以模块化的方式组织状态，每个模块可以拥有自己的状态、操作和 getter，使得状态管理逻辑更加清晰、可维护和可扩展。

5. 插件化：Pinia 允许你使用插件来扩展其功能。你可以为 Pinia 编写自定义插件，以满足特定的需求，并将其应用在应用程序中。

6. 性能优化：Pinia 在内部使用了按需加载状态的机制，只有当组件需要访问特定的状态时，才会进行响应式追踪，减少了响应式系统的负担，提升了性能。

总的来说，Pinia 是一个简单、高效、类型安全的状态管理库，能够帮助开发者更好地管理和组织应用程序的状态。如果你正在使用 Vue 3，Pinia 是一个值得考虑的选择。

---

二，pinia基本使用（这里简单略过安装和引入 详细请前往：引入pinia）

1. npm install pinia 安装插件

2. 在main.ts挂载 

3. 在src目录下创建store文件夹，并在store文件夹下创建index.ts

   （这个就类似于仓库，里面管理pinia的存储信息）

    defineStore函数接受两个参数，第一个参数是id，简单说就是一个名称，第二个参数store 的配置对象，分为三个核心概念：

1. State: State 表示应用程序的状态数据，在 Pinia 中，你可以通过定义 State 类或普通对象来表示你的状态，然后在组件中访问和修改它。

2. Getters: Getters 是从状态中派生出来的计算属性，用于提供对状态的计算和转换。在 Pinia 中，你可以定义 Getters 来获取和处理状态的值，并在需要时从组件中访问和使用它们。Getters 可以类比为 Vue 组件中的计算属性。

3. Actions: Actions 是用于操作和修改状态的方法。在 Pinia 中，你可以定义 Actions 来处理异步操作、状态的变更和其他业务逻辑。Actions 可以在组件中触发和调用，然后执行相应的逻辑以更新状态。

//定义关于counter的store
import {defineStore} from 'pinia'
 
const useCounter = defineStore("counter",{
    state:() => ({
        count: 0,
    }),
    
    getters: {
 
  	},
 
  	actions: {
 
  	}
})
 
//暴露这个useCounter模块
export default useCounter

4.在页面中使用

使用 storeToRefs 函数可以将 store 中的状态属性转换为具有响应式能力的 ref 对象，使得状态变化在组件中能够自动更新

我们可以在调试工具里面直接看到pinia

---

三，修改state的数据

1. 页面通过点击事件触发修改

2. 用$path函数修改 （这里我建了一个新的库 user来演示）

 

$state 方式（这个是替换的方式）这个基本不用，可以看查阅官方文档。 

---

四，重置数据

 

function resetUser() { //重置
    userCon.$reset()
}

---

 五，getters的使用

1. 基本用法

在counter里面演示：

页面中：

 2. 引入另一个getters

 

  3. getters中取别的store中的数据

测试：在counter模块里面拿到user中的age数据

 六，actions的使用

我们在 actions 定义了一个 increment 方法，用于将 count 的值加一。在组件中，通过点击按钮触发 incrementCount 方法来调用 increment action，达到修改状态的效果。