Vue状态管理库Pinia详细介绍

 更新时间:2022年08月16日 11:13:45   作者:贤蛋大眼萌  
这篇文章主要介绍了Vue3-pinia状态管理,pinia是 vue3 新的状态管理工具,简单来说相当于之前 vuex,它去掉了 Mutations 但是也是支持 vue2 的,需要的朋友可以参考下

什么是 Pinia

Pinia (西班牙语中的菠萝),本质上依然是一个状态管理的库,用于跨组件、页面进行状态共享.

pinia 与 vuex 的区别:

  • 更友好的TypeScript支持,Vuex之前对TS的支持很不友好
  • 与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的仪式,提供了 Composition-API 风格的 API
  • 不再有modules的嵌套结构
  • 也不再有命名空间的概念,不需要记住它们的复杂关系

如何使用 Pinia

安装 pinia

yarn add pinia

创建一个pinia

// src/stores/index.js
import { createPinia } from "pinia";
const pinia = createPinia()
export default pinia
//main.js
import pinia from './stores'
app.use(pinia)

认识 Store

一个 Store (如 Pinia)是一个实体,它会持有为绑定到你组件树的状态和业务逻辑,也就是保存了全局的状态

这样就可以定义任意数量的Store来管理你的状态,包括 state、getters、actions

定义一个store

  • Store 是使用 defineStore() 定义的,
  • 且它需要一个唯一名称,作为第一个参数传递

使用 store

操作 State

state 是 store 的核心部分,store是用来实现我们管理状态的。

  • 方式一:直接一个个修改state
  • 方式二:一次性修改多个状态
  • 方式三:替换state
  • 方式四:重置state

Getters

1. 认识和定义 Getters

Getters相当于Store的计算属性:

  • 可以用 defineStore() 中的 getters 属性定义;
  • getters中可以定义接受一个state作为参数的函数;

2. 访问 Getters

  • 方式一:访问当前 store 的Getters
  • 方式二:Getters 中访问自己的其他Getters
  • 方式三:访问其他的 store 的Getters
getters: {
    // 1. 基本使用
    debouleCount(state) {
      return state.count * 2
    },
    // 2. 一个 getters 引入另外一个 getters
    useDebouleCount() {
      return this.debouleCount + 2
    },
    // 3. getter也支持返回一个函数
    getFriendById(state) {
      return function (id) {
        for (let i = 0; i < state.vagetabel.length; i++) {
          const vagetabel = state.vagetabel[i]
          if (vagetabel.id === id) {
            return vagetabel
          }
        }
      }
    },
    // 4.访问其他store中的Getters
    showMessage(state) {
      // 获取user信息
      const useStore = useUser()
      // 获取自己的state
      // 拼接信息
      return `name:${useStore.name} - count:${state.count}`
    }
  }

认识和定义 Action

Action 可以理解成组件中的 methods ,和getters一样,在action中可以通过this访问整个store实例的所有操作。

Action 是支持异步操作的,所以可以使用 await。

到此这篇关于Vue状态管理库Pinia详细介绍的文章就介绍到这了,更多相关Vue Pinia内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 解决Can''t find variable: SockJS vue项目的问题

    解决Can''t find variable: SockJS vue项目的问题

    这篇文章主要介绍了解决Can't find variable: SockJS vue项目的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex)

    uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex)

    这篇文章主要介绍了uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 浅谈Vue灰度发布新功能的使用

    浅谈Vue灰度发布新功能的使用

    本文主要介绍了浅谈Vue灰度发布新功能的使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详解Vue的组件中data选项为什么必须是函数

    详解Vue的组件中data选项为什么必须是函数

    这篇文章主要给大家介绍了关于Vue的组件中data选项为什么必须是函数的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-08-08
  • 使用vxe-table合并单元格后增加选中效果

    使用vxe-table合并单元格后增加选中效果

    这篇文章主要介绍了使用vxe-table合并单元格后增加选中效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue图片裁剪功能实现代码

    Vue图片裁剪功能实现代码

    这篇文章主要介绍了Vue图片裁剪功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • vue项目下npm或yarn下安装echarts多个版本方式

    vue项目下npm或yarn下安装echarts多个版本方式

    这篇文章主要介绍了vue项目下npm或yarn下安装echarts多个版本方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • 关于Vue3过渡动画的踩坑记录

    关于Vue3过渡动画的踩坑记录

    在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于Vue3过渡动画踩坑的相关资料,需要的朋友可以参考下
    2021-12-12
  • Vue项目中ESlint规范示例代码

    Vue项目中ESlint规范示例代码

    这篇文章主要给大家介绍了关于Vue项目中ESlint规范的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决

    vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决

    这篇文章主要介绍了vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论