当前位置:   article > 正文

vue3项目中的pinia简单使用方法_用vue3.0写一个简单的利用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 可以在组件中触发和调用,然后执行相应的逻辑以更新状态。
  1. //定义关于counter的store
  2. import {defineStore} from 'pinia'
  3. const useCounter = defineStore("counter",{
  4. state:() => ({
  5. count: 0,
  6. }),
  7. getters: {
  8. },
  9. actions: {
  10. }
  11. })
  12. //暴露这个useCounter模块
  13. export default useCounter
4.在页面中使用
使用 storeToRefs 函数可以将 store 中的状态属性转换为具有响应式能力的 ref 对象,使得状态变化在组件中能够自动更新

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


三,修改state的数据

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

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

 

$state 方式(这个是替换的方式)这个基本不用,可以看查阅官方文档。 

四,重置数据

 

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


 五,getters的使用

1. 基本用法

在counter里面演示:

页面中:

 2. 引入另一个getters

 

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

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

 六,actions的使用

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/141248
推荐阅读
相关标签
  

闽ICP备14008679号