Vue3 - Pinia 状态管理（环境搭建安装及各属性使用教程）详细使用教程

news2024/11/24 19:17:07

目录

    • 初识 Pinia
    • 介绍
    • 环境搭建
    • getters 属性
    • actions 属性
    • Pinia 模块化
    • Pinia 解构 store
    • Pinia 数据持久化
    • SEO

初识 Pinia

vue 官方文档：https://cn.vuejs.org/guide/scaling-up/state-management.html#pinia
Pinia 官方文档：https://pinia.web3doc.top/

pinia（在英语中发音类似/peenya/）是和 pina（西班牙语的pineapple）最近接的词（pineapple是菠萝的意思，译者注）。刚好别人没有使用过这个包名。菠萝实际上是好多独立的花聚合在一起形成了一个水果。这和状态管理类似，每一个状态都是独立的，但是最后要把它们聚合在一起。

介绍

相信大家在 Vue2 中没少用 Vuex 状态管理库，但在 Vue3 中已经不建议使用了（而是使用更强的 Pinia）。

Pinia 它包括但不限于以下几点优势：

  • Pinia 是 Vuex4 的升级版，也就是 Vuex5
  • Pinia 极大的简化了Vuex的使用，是 Vue3的新的状态管理工具
  • Pinia 对 ts的支持更好，性能更优， 体积更小，可用于 Vue2 和 Vue3
  • Pinia 支持 Vue Devtools 工具，以及模块热更新和服务端渲染

另外，状态管理的核心属性相比于 Vue2 变化不大。

Vuex：State、Getters、Mutations（同步） 和 Actions（异步）。
Pinia：State、Getters 和 Actions(同步异步均支持)。

可以看到 Pinia 是将 Mutations 同步方法给去掉了，开发者可以随便同步或异步，它内部自己处理。

另外，Pinia 这几个属性的作用，相比 Vue2 变化基本无差异。

  • State： 类似于组件中data，用于存储全局状态。
  • Getters： 类似于组件中的 computed，根据已有的State封装派生数据，也具有缓存的特性。
  • Actions： 类似于组件中的 methods，用于封装业务逻辑，同步异步均可以。

环境搭建

如果您的项目创建时没有携带 Pinia，那么您需要手动安装和配置。

我们先来安装 Pinia，咱们打开编辑器，在项目根目录执行命令。

cnpm install pinia -S

-S 是为了将其保存至 package.json 中，便于项目给其他开发人员。

在这里插入图片描述

好，安装完成了。

这回咱们手动配置一下，先在 src 目录下新建 store 文件夹，然后在里面再新建一个 index.js 文件。

然后，在 index.js 里面写入以下代码。

// 通过 pinia 提供的 defineStore 接口来创建一个状态管理实例
import { defineStore } from 'pinia'

// 第一个参数: 容器的ID(必须唯一) 后面Pinia会把所有的容器挂载到根容器
// 第二个参数：选项配置对象, state / getter / action
// 返回值：一个函数, 调用即可得到状态管理容器实例
export const store = defineStore('main', {
    // 这块vue2中是一个对象,但在这里必须是一个函数(箭头函数)
    // 为什么必须是函数呢? 在服务端渲染的时候避免交叉请求导致的数据状态污染
    // 那又为什么是箭头函数呢? 为了TypeScript更好的类型推导
    // 另外也可以这么写: state: () => ({...})
    state: () => {
        return {
            title: '比游戏还刺激——杰哥'
        }
    },
    getters:{},
    actions:{}
})

写完了配置后，我们在项目入口进行声明和注册，打开 main.js。

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

// 使用 createPinia 创建Pinia实例
import { createPinia } from 'pinia'

const app = createApp(App)

// use
app.use(createPinia())
app.mount('#app')

一切准备做好了，我们随便找个页面试一试，如下代码所示：

<template>
  <h1>
    {{ vuex.title }}
  </h1>
</template>

<!--
  setup语法糖(组件无需注册/数据和方法无需return/不用写setup()/...)
-->
<script setup>
import { store } from './store/index.js'
const vuex = store()
// Proxy
console.log(vuex)
</script>

结果：

在这里插入图片描述

可以看到，成功读到了数据。

getters 属性

前面我们学习了如何搭建状态管理及读取数据，实际上即为 state 属性。

这块学习 getters 属性，我们打开编辑器，来简单体验一下。

先打开 index.js ，把前面写的代码，改造一下。

// 通过 pinia 提供的 defineStore 接口来创建一个状态管理实例
import { defineStore } from 'pinia'

// 第一个参数: 容器的ID(必须唯一) 后面Pinia会把所有的容器挂载到根容器
// 第二个参数：选项配置对象, state / getter / action
// 返回值：一个函数, 调用即可得到状态管理容器实例
export const store = defineStore('main', {
    // 这块vue2中是一个对象,但在这里必须是一个函数(箭头函数)
    // 为什么必须是函数呢? 在服务端渲染的时候避免交叉请求导致的数据状态污染
    // 那又为什么是箭头函数呢? 为了TypeScript更好的类型推导
    // 另外也可以这么写: state: () => ({...})
    state: () => {
        return {
            num: 10
        }
    },

    // 其实这个就相当于组件中的 computed 计算属性
    // 也就是具有缓存的功能
    getters: {
        // 获取num*2的结果
        // 参数: state状态对象(看上面)
        getResult(state) {
            return state.num *= 2
        }
    },
    actions: {}
})

然后随便找个页面，获取测试一下。

<template>
  <h1>
    {{ vuex.getResult }}
  </h1>
</template>

<!--
  setup语法糖(组件无需注册/数据和方法无需return/不用写setup()/...)
-->
<script setup>
import { store } from './store/index.js'
const vuex = store()
// Proxy
console.log(vuex)
</script>

在这里插入图片描述

可以看到，成功了，非常简单。

actions 属性

它主要是用来修改 state 中的数据的。

在 Pinia 中，修改 state 数据有两种官方建议的方法，我们来一一实操一把。

打开编辑器，打开前面的 index.js 文件，修改一下。

import { defineStore } from 'pinia'
export const store = defineStore('main', {
    state: () => {
        return {
            // 多加一些数据
            num: 10,
            name: '我是沙雕',
            desc: '高级前端工程师'
        }
    },
    getters: {},

    // 这个就相当于组件中的 methods 方法
    // 注意: 不能使用箭头函数来定义actions操作,因为箭头函数会绑定外部的this
    actions: {
        changeState() {
            // 比如要修改state中的name属性
            // 注意: 使用this.x来访问state数据
            this.name = '你是沙雕'
        }
    }
})

然后随便找个页面，测试一下。

<template>
  <h1>{{ vuex.name }}</h1>
  <button @click="go">修改state值</button>
</template>

<script setup>
// 获取状态管理
import { store } from './store/index.js'
const vuex = store()

// 调用actions方法修改
const go = () => {
  vuex.changeState()
}
</script>

在这里插入图片描述

很棒。

前面说了，有两种方式修改数据，咱们再来看一个通过 $patch 方法来修改 state 数据。

<template>
  <h1>{{ vuex.name }}</h1>
  <button @click="go">修改state值</button>
</template>

<script setup>
// 获取状态管理
import { store } from './store/index.js'
const vuex = store()

// 调用actions方法修改
const go = () => {
  // state: 就是你现在脑子里想的这个state
  vuex.$patch(state => {
    // 可直接访问
    state.name = '你是大沙雕'
  })
}
</script>

在这里插入图片描述

注意啊，这个 $patch 除了可以改数据的本职之外，还有一个优点就是可以批量修改数据。

啥意思呢，就是一次可以改一堆 state 数据。

打开编辑器，尝试多修改几个数据。

<template>
  <h1>{{ vuex.name }}</h1>
  <h1>{{ vuex.desc }}</h1>
  <button @click="go">修改state值</button>
</template>

<script setup>
// 获取状态管理
import { store } from './store/index.js'
const vuex = store()

// 调用actions方法修改
const go = () => {
  // state: 就是你现在脑子里想的这个state
  vuex.$patch(state => {
    // 批量修改数据
    state.name = '我是大沙雕'
    state.desc = '混凝土瞬间移动工程师（搬砖的）'
  })
}
</script>

在这里插入图片描述

Pinia 模块化

传送门：https://wangjiabin.blog.csdn.net/article/details/128114009

Pinia 解构 store

传送门：https://wangjiabin.blog.csdn.net/article/details/128114279

Pinia 数据持久化

传送门：https://wangjiabin.blog.csdn.net/article/details/128115020

SEO

vue3 状态管理工具 pinia 使用，Vue3状态管理之Pinia的入门使用教程，Pinia使用详解(vue3默认状态管理)，详解Vue3状态管理库Pinia的使用方法，Vue3 使用Pinia状态管理，vue3新一代状态管理器 — pinia的学习与使用，vue3使用pinia管理状态，vue3全家桶之-状态管理器pinia的使用，Vue3中Pinia的基本使用，上手Vue 新的状态管理 Pinia,一篇文章就够了，Pinia 安装和基本使用，pinia环境搭建，pinia 是一个轻量级的状态管理库，Vue3 - Pinia 状态管理（环境搭建安装及各属性使用教程）详细使用教程

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/48822.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

hiveSql冷门但好用函数 --持续更新

hiveSql冷门但好用函数 --持续更新

hiveSql常用函数字符串函数to_jsonjson_tupletranslate日期函数next_day字符串函数 to_json 将STRUCT类型的数据转化为json格式字符串&#xff0c;此处需要另外学习一个named_struct()函数:自定义结构化数据的KVnamed_struct(k1,v1,k2,v2…)示例&#xff1a; select named_s…
阅读更多...
吉时利2602A数字源表-安泰测试

吉时利2602A数字源表-安泰测试

吉时利Keithley2602A双通道系统数字电源 Keithley/吉时利2602A数字源表数字源表是吉时利新的I-V源测量仪器&#xff0c;可用作台式I-V特征分析工具或者构成多通道I-V测试系统的组成模块。作为台式仪器使用时&#xff0c;2600A系列仪器提供了一个嵌入式TSP Express软件工具&…
阅读更多...
函数定义、this指向、闭包等

函数定义、this指向、闭包等

1、函数的定义和调用 1.1函数的定义方式 1、自定义函数&#xff08;命名函数&#xff09; 2、函数表达式&#xff08;匿名函数&#xff09; 3、利用 new Function (‘参数1’, ‘参数2’, ‘函数体’) 1、自定义函数&#xff08;命名函数&#xff09; function fn() {}2、函…
阅读更多...
微服务框架 SpringCloud微服务架构 6 Nacos 配置管理 6.1 Nacos 实现配置管理

微服务框架 SpringCloud微服务架构 6 Nacos 配置管理 6.1 Nacos 实现配置管理

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构6 Nacos 配置管理6.1 Nacos 实现配置管理6.1.1 统一配置管理6.1.2 直接开干…
阅读更多...
Chapter9.4：线性系统的状态空间分析与综合(下)

Chapter9.4：线性系统的状态空间分析与综合(下)

此系列属于胡寿松《自动控制原理题海与考研指导》(第三版)习题精选&#xff0c;仅包含部分经典习题&#xff0c;需要完整版习题答案请自行查找&#xff0c;本系列属于知识点巩固部分&#xff0c;搭配如下几个系列进行学习&#xff0c;可用于期末考试和考研复习。 自动控制原理(…
阅读更多...
UG NX二次开发（C#）-CAM-获取所有的加工刀具表单

UG NX二次开发（C#）-CAM-获取所有的加工刀具表单

文章目录 1、前言2、加工模块的刀具2.1 进入加工模板2.2 创建加工刀具3、创建一个UI Styler程序3.1 创建一个UI Styler3.2 保存对话框4、创建GetMachiningToolList工程5、添加代码6、保存工程，生成dll7、配置工程8、测试效果1、前言 UG NX软件最擅长的就是生成加工程序，包括…
阅读更多...
Express操作MongoDB

Express操作MongoDB

一、Express框架通过Mongoose模块操作MongoDB数据库 1、MongoDB数据库&#xff1a; ​ &#xff08;1&#xff09;存放数据的格式&#xff1a;key-value ​ &#xff08;2&#xff09;数据库(database) ——- 集合(collection) ——- 文档(document) ​ &#xff08;3&…
阅读更多...
数字逻辑·时序线路设计【原始状态表】

数字逻辑·时序线路设计【原始状态表】

这一篇着重原始状态表 组合线路设计与时序线路设计的区别 组合线路设计方法&#xff1a; 确定输入和输出写真值表写表达式并化简根据题目给出的门或者其他要求进行变换&#xff08;取反&#xff09;画电路图 时序线路设计方法&#xff1a; 确定输入和输出&#xff0c;建立…
阅读更多...
[Linux]------初识多线程

[Linux]------初识多线程

文章目录前言一、 Linux线程概念什么是线程线程理解证明C线程库二、页表三、线程的优点四、线程缺点五、线程异常六、线程的用途总结前言 本节重点&#xff01;&#xff01;&#xff01; 了解线程概念&#xff0c;理解线程与进程的区别和联系。学会线程控制&#xff0c;线程创…
阅读更多...
因子模型套利定价理论APT的应用

因子模型套利定价理论APT的应用

本文是Quantitative Methods and Analysis: Pairs Trading此书的读书笔记。 一、APT&#xff08;套利定价理论&#xff09;应用于计算投资组合的风险 某个投资组合由两个股票A和B组成&#xff0c;它们的暴露系数向量(exposure vector)分别为和。两个股票在投资组合中的比重为…
阅读更多...
Turtlebot2简单控制

Turtlebot2简单控制

遥控 遥控前为了让turtlebot接受命令&#xff0c;需要启动 roslaunch turtlebot_bringup minimal.lauch 键盘操作命令&#xff1a; roslaunch turtlebot_teleop keyboard_teleop.launch 简单脚本控制&#xff1a; 首先输入命令 roslaunch turtlebot_bringup minimal.lau…
阅读更多...
WebRTC学习笔记七 pion/webrtc

WebRTC学习笔记七 pion/webrtc

一、Usage用法 1.使用Go Modules Go Modules are mandatory for using Pion WebRTC. So make sure you set export GO111MODULEon, and explicitly specify /v2 or /v3 when importing. 2.常见示例 example applications contains code samples of common things people bu…
阅读更多...
Web3.0带来天翻地覆的变化？全面科普！所谓的Web3.0到底是什么？

Web3.0带来天翻地覆的变化？全面科普！所谓的Web3.0到底是什么？

Web3.0在2021年尾声突然蹿红&#xff0c;在美国国会的听证会里&#xff0c;一句“我们如何确保web3革命发生在美国”引发了大家对于Web3.0的关注&#xff0c;而后马斯克一篇内容为“有人看过web3.0吗? 我没有找到”的推文&#xff0c;将关于Web3.0的讨论推向了高潮。 甚至于这…
阅读更多...
零基础入门JavaWeb——CSS相关知识

零基础入门JavaWeb——CSS相关知识

一、CSS的作用 SS是用于设置HTML页面标签的样式&#xff0c;用于美化HTML页面。 二、CSS的引入方式 2.1 行内样式 在要设置样式的标签中添加style属性&#xff0c;编写css样式&#xff1b;行内样式仅对当前标签生效。 <div style"border: 1px solid red;width: 10…
阅读更多...
「MySQL高级篇」SQL优化

「MySQL高级篇」SQL优化

大家好&#xff0c;我是Zhan&#xff0c;一名个人练习时长一年半的大二后台练习生&#xff0c;最近在学MySQL高级篇&#xff0c;欢迎各路大佬一起交流讨论 &#x1f449;本篇速览 在前面对索引的的学习中&#xff0c;我们学习到了从MySQL“底层”优化了SQL执行查询的算法&…
阅读更多...
认识微服务

认识微服务

认识微服务&#xff1a; 背景&#xff1a;随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。 这些架构之间有怎样的差别呢&#xff1f; 单体架构&#xff1a; 单体架构&#xff1a;将业务的所有功…
阅读更多...
颜色的感知

颜色的感知

人体内有三种颜色感知细胞&#xff0c;能感知红、绿、蓝三种颜色。 人体内还有一种光强感知细胞&#xff0c;这种关光的波长刚好和绿光接近。 椎状感应颜色 柱状感应强度。
阅读更多...
[附源码]Python计算机毕业设计Django的专业技能认证系统

[附源码]Python计算机毕业设计Django的专业技能认证系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
RocketMQ 的消费者类型详解与最佳实践

RocketMQ 的消费者类型详解与最佳实践

作者&#xff1a;凌楚 在 RocketMQ 5.0 中&#xff0c;更加强调了客户端类型的概念&#xff0c;尤其是消费者类型。为了满足多样的 RocketMQ 中一共有三种不同的消费者类型&#xff0c;分别是 PushConsumer、SimpleConsumer 和 PullConsumer。不同的消费者类型对应着不同的业务…
阅读更多...
AI美颜SDK算法详解

AI美颜SDK算法详解

AI美颜SDK是近几年兴起的新兴美颜方式&#xff0c;区别于传统的美颜工具&#xff0c;AI美颜采用人工智能的深度学习算法实现智能化美颜&#xff0c;下文小编将为大家讲解一下AI美颜SDK相关的知识。 一、与传统美颜的区别之处 从宏观角度来讲&#xff0c;AI美颜技术与传统美颜…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023