Vue从入门到实战Day12

news2024/10/6 6:39:35

一、Pinia快速入门

1. 什么是Pinia

Pinia是Vue的最新状态管理工具，是Vuex的替代品

1. 提供更加简单的API（去掉了mutation）

2. 提供符合组合式风格的API（和Vue3新语法统一）

3. 去掉了modules的概念，每一个store都是一个独立的模块

4. 配合TypeScript更加友好，提供可靠的类型推断

2. 手动添加Pinia到Vue项目

在实际开发项目的时候，关于Pinia的配置，可以在项目创建时自动添加

1. 使用Vite创建一个空的Vue3项目

npm create vue@latest

2. 按照官方文档安装Pinia到项目中

①安装Pinia

npm install pinia

②创建一个 pinia 实例 (根 store) 并将其传递给应用 - mian.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()  // 创建Pinia实例
const app = createApp(App)  // 创建根实例

app.use(pinia)  // pinia插件的安装配置
app.mount('#app')  // 视图的挂载

3. Pinia基础使用 - 计数器案例

1. 定义store

src/store/counter.js

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

// 定义store
// defineStore(仓库的唯一标识, () => { ... })

export const useCounterStore =  defineStore('counter', () => {
    // 声明数据 - state
    const count = ref(6)
    // 声明操作数据的方法 - action(普通函数)
    const addCount = () => {
        count.value++
    }
    const subCount = () => count.value--

    // 声明基于数据派生的计算属性 - getters(computed)
    const double = computed(() => count.value * 2)

    // 声明数据 - state
    const msg = ref('hello Pinia')

    return {
        count, 
        addCount,
        subCount,
        double,
        msg
    }
})

2. 组件使用store

App.vue

<script setup>
import Son1Com from '@/components/Son1Com.vue'
import Son2Com from '@/components/Son2Com.vue'
import { useCounterStore } from '@/store/counter'

const counterStore = useCounterStore()
console.log(counterStore)
</script>

<template>
  <div>
    <h3>
      App.vue根组件
      - {{ counterStore.count }}
      - {{ counterStore.msg }}
    </h3>
    
    <Son1Com></Son1Com>
    <Son2Com></Son2Com>
  </div>
</template>

<style scoped>

</style>

src/components/Son1Com.vue

<script setup>
import { useCounterStore } from '@/store/counter'

const counterStore = useCounterStore()
</script>

<template>
  <div>
    我是Son1Com.vue 
    - {{ counterStore.count }}
    - {{ counterStore.double }}
    <button @click="counterStore.addCount">+</button>
  </div>
</template>

<style scoped>

</style>

src/components/Son2Com.vue

<script setup>
import { useCounterStore } from '@/store/counter'

const counterStore = useCounterStore()
</script>

<template>
  <div>
    我是Son2Com.vue
    - {{ counterStore.count }}
    <button @click="counterStore.subCount">-</button>
  </div>
</template>

<style scoped>

</style>

4. action异步实现

编写方式：异步action函数的写法和组件中获取异步数据的写法完全一致

接口地址：http://geek.itheima.net/v1_0/channels

需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中

示例代码：

src/store/channel.js

import { defineStore } from 'pinia'
import { ref } from 'vue'
import axios from 'axios'

export const useChannelStore = defineStore('channel', () => {
    // 声明数据
    const channelList = ref([])
    // 声明操作数据的方法
    const getList = async () => {
        // 支持异步
        const { data: {data} } = await axios.get('http://geek.itheima.net/v1_0/channels')
        channelList.value = data.channels
        console.log(data.channels)
    }
    // 声明getters相关

    return {
        channelList,
        getList
    }
})

App.vue

<script setup>
import Son1Com from '@/components/Son1Com.vue'
import Son2Com from '@/components/Son2Com.vue'
import { useCounterStore } from '@/store/counter'
import { useChannelStore } from '@/store/channel.js'

const counterStore = useCounterStore()
const channelStore = useChannelStore()
// console.log(counterStore)


</script>

<template>
  <div>
    <h3>
      App.vue根组件
      - {{ counterStore.count }}
      - {{ counterStore.msg }}
    </h3>
    
    <Son1Com></Son1Com>
    <Son2Com></Son2Com>
    <hr>
    <button @click="channelStore.getList">获取频道数据</button>
    <ul>
      <li v-for="item in channelStore.channelList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style scoped>

</style>

5. storeToRefs()

为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()。它将为每一个响应式属性创建引用。当你只使用 store 的状态而不调用任何 action 时，它会非常有用。请注意，你可以直接从 store 中解构 action，因为它们也被绑定到 store 上：

<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const { name, doubleCount } = storeToRefs(store)
// 作为 action 的 increment 可以直接解构
const { increment } = store
</script

示例代码：

App.vue

<script setup>
import { storeToRefs } from 'pinia'
import Son1Com from '@/components/Son1Com.vue'
import Son2Com from '@/components/Son2Com.vue'
import { useCounterStore } from '@/store/counter'
import { useChannelStore } from '@/store/channel.js'

const counterStore = useCounterStore()
const channelStore = useChannelStore()

// 此时，直接结构，不处理，数据会丢失响应式
// const { count, msg } = counterStore
const { count, msg } = storeToRefs(counterStore)
const { channelList } = storeToRefs(channelStore)
const { getList } = channelStore


</script>

<template>
  <div>
    <h3>
      App.vue根组件
      - {{ count }}
      - {{ msg }}
    </h3>
    
    <Son1Com></Son1Com>
    <Son2Com></Son2Com>
    <hr>
    <button @click="getList">获取频道数据</button>
    <ul>
      <li v-for="item in channelList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style scoped>

</style>

6. Pinia的调试

Vue官方的dev-tools调试工具对Pinia直接支持，可用直接进行调试

Pinia持久化插件

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

注：要先安装Pinia，且Pinia版本在2.0.0以上

1. 安装插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

2. main.js使用

import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))

3. store仓库中，persist: true开启

如src/store/counter.js

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

// 定义store
// defineStore(仓库的唯一标识, () => { ... })

export const useCounterStore =  defineStore('counter', () => {
    // 声明数据 - state
    const count = ref(6)
    // 声明操作数据的方法 - action(普通函数)
    const addCount = () => {
        count.value++
    }
    const subCount = () => count.value--

    // 声明基于数据派生的计算属性 - getters(computed)
    const double = computed(() => count.value * 2)

    // 声明数据 - state
    const msg = ref('hello Pinia')
    // 声明操作数据的方法 - action

    // 声明基于数据派生的计算属性 - getters

    return {
        count, 
        addCount,
        subCount,
        double,
        msg
    }
},
{
    // persist: true,  // 开启当前模块的持久化
    persist: {
        key: 'hm-counter',  // 修改本地存储的唯一标识
        // 这个 store 将被持久化存储在 sessionStorage中
        // storage: sessionStorage,
        paths: ['count'],  // 存储的是哪些数据
    }
})

7. 总结

1. Pinia是用来做什么的？

答：新一代的状态管理工具，替代vuex

2. Pinia中还需要mutation吗？

答：不需要，action既支持同步也支持异步

3. Pinia如何实现getter?

答：computed计算属性函数

4. Pinia产生的Store如何解构赋值数据保持响应式？

答：storeToRefs

5. Pinia如何快速实现持久化？

答：pinia-plugin-persistedstate

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

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

相关文章

【漏洞复现】懒人网址导航页 search.html SQL注入漏洞

【漏洞复现】懒人网址导航页 search.html SQL注入漏洞

0x01 产品简介 赖人网址导航系统是一种智能化的网址导航平台&#xff0c;旨在帮助用户快速找到所需的网址和资源。该系统提供了智能化的网址搜索和推荐功能&#xff0c;能够根据用户的搜索习惯和偏好推荐相关的网址和资源。同时&#xff0c;系统还提供了网址分类、网址收藏和网…
阅读更多...
虚拟化技术[1]之服务器虚拟化

虚拟化技术[1]之服务器虚拟化

文章目录 虚拟化技术简介数据中心虚拟化 服务器虚拟化服务器虚拟化层次寄居虚拟化裸机虚拟化VMM无法直接捕获特权指令解决方案 服务器虚拟化底层实现CPU虚拟化内存虚拟化I/O设备虚拟化 虚拟机迁移虚拟机动态迁移迁移内容&#xff1a;内存迁移迁移内容&#xff1a;网络资源迁移迁…
阅读更多...
二叉树实战演练

二叉树实战演练

目录 1.二叉树前序遍历---leetcode 思路 画图解析&#xff1a; 2.相同的树的判断 思路&#xff1a; 3.对称二叉树 思路分析&#xff1a; 4.另一棵树的子树 思路&#xff1a; 5.二叉树的便利---牛客网 建立二叉树的逻辑图&#xff1a; 总结&#xff1a; 1.…
阅读更多...
【嵌入式软件工程师面经】Socket,TCP,HTTP之间的区别

【嵌入式软件工程师面经】Socket,TCP,HTTP之间的区别

目录&#xff1a; 目录 目录&#xff1a; 一、Socket原理与TCP/IP协议 1.1 Socket概念&#xff1a; 1.2 建立Socket连接&#xff1a; 1.3 SOCKET连接与TCP/IP连接 二、HTTP连接&#xff1a; 2.1 HTTP原理 三、三者的区别和联系 前些天发现了一个巨牛的人工智能学习网站&#xf…
阅读更多...
光伏电站在线监测智能诊断系统：开启无人值守新纪元

光伏电站在线监测智能诊断系统：开启无人值守新纪元

光伏电站在线监测智能诊断系统&#xff1a;开启无人值守新纪元 大家都知道光伏电站是通过汲取着太阳的光芒&#xff0c;为人类提供源源不断的电能源。然而&#xff0c;随着光伏电站规模的扩大和复杂性的增加&#xff0c;如何有效提高发电效率、减少人工维护成本&#xff0c;实…
阅读更多...
力扣Hot100-73矩阵置零（标记数组）

力扣Hot100-73矩阵置零（标记数组）

给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]]示例 2&#xff1a; 输入&…
阅读更多...
3、md5比较绕过

3、md5比较绕过

青少年ctf&#xff1a;EasyMD5 1、页面是一个上传页面 2、上传两个txt文件&#xff0c;bp抓包 3、go发现提示要PDF文件 4、将文件类型改成PDF类 5、改文件类型提示MD5&#xff0c;也看出它是将文件里的内容读取比较 6、改成s878926199a和QNKCDZO 猜测后端源码&#xff1a; if…
阅读更多...
水下哨兵 智能守护——北斗人员落水报警与快速应急响应方案

水下哨兵 智能守护——北斗人员落水报警与快速应急响应方案

随着科技的不断发展&#xff0c;人们对于安全的需求也越来越高&#xff0c;尤其是在水域活动中&#xff0c;落水事故时有发生&#xff0c;给人们的生命和财产安全带来了很大威胁。为了更好地保障水域活动者的安全&#xff0c;北斗短报文技术被广泛应用于落水报警系统中&#xf…
阅读更多...
SpringBoot 实现私钥解密 前端的公钥加密内容

SpringBoot 实现私钥解密 前端的公钥加密内容

目录 一、前端公钥加密 二、后端私钥解密 一、前端公钥加密 Nextjs 前端实现RSA公钥加密 JSEncrypt加载问题解决-CSDN博客 二、后端私钥解密 import javax.crypto.Cipher; import java.security.KeyFactory; import java.security.PrivateKey; import java.security.spec.…
阅读更多...
重新夺回控制权！原创始人从Synk回购FossID，致力于解决开源许可合规风险

重新夺回控制权！原创始人从Synk回购FossID，致力于解决开源许可合规风险

FossID 于 2022 年 9 月被其原始创始人从 Snyk, Inc. 重新收购。为什么 Snyk 在 2021 年收购了 FossID&#xff0c;又在 2022 年将其分拆&#xff0c;以及为什么 FossID 的创始人&#xff08;Oskar Swirtun 和 Jon Aldama&#xff09;后来又回购了该公司&#xff1f; 公司背景 …
阅读更多...
word-表格疑难杂症诊治

word-表格疑难杂症诊治

一、用表格进行排版图片、制作公文头 可以在插入图片时固定列宽 二、表格中的疑难杂症 问题一&#xff1a;表格超过页面&#xff0c;右侧文字看不见 解决&#xff1a;表格窗口-布局-自动调整-根据窗口自动调整表格 问题二&#xff1a;表格底部文字被遮挡 解决&#xff1a;布…
阅读更多...
舵机（结构，原理，控制方法）

舵机（结构，原理，控制方法）

介绍 舵机&#xff0c;全称为伺服马达&#xff08;Servo Motor&#xff09;&#xff0c;是一种能够精确控制角度或位置的电动机。它广泛应用于模型制作、机器人技术、工业自动化等领域。舵机通过接收控制信号&#xff0c;将其转化为机械运动&#xff0c;从而实现精确的控制。 …
阅读更多...
Day38 贪心算法part05

Day38 贪心算法part05

LC435无重叠区间(未掌握) 思路&#xff1a;先对数组进行排序&#xff0c;找到非重叠的区间的个数&#xff0c;然后区间的总数减去非重叠区间的个数即是需要移除的区间的个数与LC452用最少数量的箭引爆气球类似&#xff0c;但是不同的是[1,2]和[2,3]在此题并不是重叠区间但是在…
阅读更多...
Substrate 优秀学员专访｜从前端到高级测试工程师，他坚定奔赴 Web3 红海

Substrate 优秀学员专访｜从前端到高级测试工程师，他坚定奔赴 Web3 红海

4 月 29 日&#xff0c;第 14 期「Substrate 区块链开发入门课」课程圆满毕业收官&#xff0c;课程涌现了新一批优秀毕业学员&#xff0c;他们即将带着自己在课程中学习的新知识、新经验&#xff0c;奔赴 Web3 行业各个赛道。在这些学员中&#xff0c;有这样一位开发实力突出、…
阅读更多...
JVM运行时内存:垃圾回收器(Serial ParNew Parallel )详解

JVM运行时内存:垃圾回收器(Serial ParNew Parallel )详解

文章目录 1. 查看默认GC2. Serial GC : 串行回收3. ParNew GC&#xff1a;并行回收4. Parallel GC&#xff1a;吞吐量优先 1. 查看默认GC -XX:PrintCommandLineFlags&#xff1a;查看命令行相关参数&#xff08;包含使用的垃圾收集器&#xff09;使用命令行指令&#xff1a;ji…
阅读更多...
【每日刷题】Day48

【每日刷题】Day48

【每日刷题】Day48 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 872. 叶子相似的树 - 力扣&#xff08;LeetCode&#xff09; 2. 114. 二叉树展开为链表 - 力扣&…
阅读更多...
域名解析服务器（DNS）

域名解析服务器（DNS）

目录 简介 DNS 域名 域名结构 域名服务器类型 相关指令 实验内容 软件 实验准备 正向解析实验 服务端操作 客户端操作 逆向解析实验 服务端操作 客户端操作 简介 DNS DNS(Domain Name System)时互联网上的一项服务&#xff0c;作为将域名和IP地址互相映射的一个分布式数据…
阅读更多...
VUE2 tab切换导航 展示页面内容(父级子级独立)

VUE2 tab切换导航 展示页面内容(父级子级独立)

VUE2 tab切换导航 展示页面内容 父级子级独立 图片示例代码 图片示例 代码 <template><div class"center"><!-- 一级导航 --><div class"menu"><div class"menu_list"><div v-for"item of List" :k…
阅读更多...
elementUI使用el-tabs加el-form导致页面崩溃以及el-form里的input事件丢失问题

elementUI使用el-tabs加el-form导致页面崩溃以及el-form里的input事件丢失问题

elementUI使用el-tabs加el-form导致页面崩溃以及el-form里的input事件丢失问题 解决 el-form外面包一层el-row和el-col&#xff0c;el-tabs也包一层 el-fom e-tabs
阅读更多...
SpringBootWeb 篇-深入了解 Mybatis 概念、数据库连接池、环境配置和 Lombok 工具包

SpringBootWeb 篇-深入了解 Mybatis 概念、数据库连接池、环境配置和 Lombok 工具包

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文件目录 1.0 Mybatis 概述 2.0 数据库连接池 2.1 数据库连接池的主要作用包括 2.2 如何切换数据库连接池&#xff1f; 3.0 配置环境 4.0 Lombok 工具包 4.1 如何导入到项目中呢…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023