Vue08天禹老师主讲

最新推荐文章于 2024-07-19 22:38:32 发布
最新推荐文章于 2024-07-19 22:38:32 发布
阅读量342 收藏 3
点赞数 4
分类专栏： Vue3 前端 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51148337/article/details/137787988
版权
Vue3 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
前端
3 篇文章 0 订阅
订阅专栏

Pinia的理解

集中式状态管理

准备一个效果

加数字，变成字符串拼接，如何改变

方法一：v-model.number=“n”

    <div class="count">
        <h2>当前求和为：{{sum}}</h2>
        <select name="" id="" v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>

方法二：

            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>

LoveTalk.vue

准备一个数组，生成之后，再给他放进数组，这个之前没见过！

还有下面一个命名

Axios 是一个 基于 promise 的 HTTP 客户端，适用于 node.js 和浏览器。

<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句土味情话</button>
        <ul>
            <li v-for="talk in talklist" :key="talk.id">{{talk.title}}</li>
        </ul>
    </div>
</template>

<script setup lang="ts" name="LoveTalk">
    import { reactive } from 'vue'
    import axios from "axios";
    import { nanoid } from 'nanoid'
    //数据
    let talklist = reactive([
        { id: 'ftrfasdf01', title: '今天天气好' },
        { id: 'ftrfasdf02', title: '今天天气好2' },
        { id: 'ftrfasdf03', title:'今天天气好3'}
    ])
//方法
    async function getLoveTalk() {
        //发请求
        let result = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
        console.log(result);
        console.log(result.data);
        console.log(result.data.content);
        //把请求回来的字符，包装成一个对象
        let obj = {id:nanoid(),title:result.data.content} //简单写成title:content 上面let可以result改成 {data:{content}}；还可以进一步 title  {data:{content:title}}
        //放到数组中
        talklist.unshift(obj)
    }
</script>

搭建pinia环境

安装pinia包

npm i pinia

main.ts

//引入pinia
import {ceratePinia} from 'pinia'
//创建pinia
const pinia = createPinia()
//安装pinia
app.use(pinia)

存储+读取数据

注意小点：

let obj = reactive({
a:1,
b:2,
c:ref(3)
})
let x = ref(9)
console.log(obj.a) //1
console.log(obj.b) //2
console.log(obj.c) //3,在reactive里面就可以直接不用.value
console.log(x) //ref实例对象
console.log(x.value) //9

存储数据 store/count.ts

import { defineStore } from 'pinia'

export const useCountStore = defineStore('count', {
    //state真正存储数据的地方
    state() {
        return {
            sum: 6
        }
    }
})

读取数据 Count.vue

<script setup lang="ts" name="Count">
    import { ref } from 'vue';
    import { useCountStore } from '@/store/count'

const countStore = useCountStore()
    console.log('@@@', countStore);
    //以下两种都可以拿到state中的数据
// console.log('@@@',countStore.sum);
    console.log('@@@',countStore.$state.sum);
</script>

修改数据

第一种修改方式

    <script setup lang="ts" name="Count">
//方法
    function add() {
        //第一种修改方式
        countStore.sum += 1
	}
     </script>

第二种修改方式

    <script setup lang="ts" name="Count">
//方法
    function add() {
        //第二种方式 数据很多的时候
        countStore.$patch({
            sum: 9,
            school: '北京',
            address:'朝阳'
        })
	}
     </script>

第三种修改方式

Count.vue

    <script setup lang="ts" name="Count">
//方法
    function add() {
        //第三种修改方式
        countStore.increment(n.value)
	}
     </script>

store/count.ts

 export const useCountStore = defineStore('count', {  
	actions: {
        increment(value: number) {
            console.log('increment被调用了', value)
            //修改数据 this是当前的store
            console.log(this.sum); //6
            this.sum += 1

        }
    }
 })

storeToRefs

将方法可以放到lovetalk.ts里面

export const useLoveTalkStore = defineStore('talk', {
    actions: {
        async getATalk() {
            //发请求，下面这行写法是：连续解构+重命名
            let { data: { content: title } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
            // //把请求回来的字符，包装成一个对象
            let obj = { id: nanoid(), title } //简单写成title:content 上面let可以result改成 {data:{content}}；还可以进一步 title  {data:{content:title}}
            // //放到数组中
            this.talkList.unshift(obj)
        }
    }
})

在LoveTalk.vue里面可以直接调用

<script setup lang="ts" name="LoveTalk">
    import { useLoveTalkStore } from '@/store/lovetalk';
    
    const talkStore = useLoveTalkStore()
  
    //方法
    function getLoveTalk() {
        talkStore.getATalk()
    }
</script>

如何调用数据写法更简洁，使用storeTorefs

h3标题里面不用写countStore.sum、countStore.school 、countStore.address

<template>
    <div class="count">
        <h2>当前求和为：{{sum}}</h2>
        <h3>欢迎来到：{{ school }},坐落于{{ address }}</h3>
        <select name="" id="" v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>
</template>

<script setup lang="ts" name="Count">
    import { ref,toRefs } from 'vue';
    import { useCountStore } from '@/store/count'
    import { storeToRefs } from 'pinia';

    const countStore = useCountStore()
    //storeToRefs只会关注store中数据，不会对方法进行ref包裹
    const {sum,school,address} = storeToRefs(countStore)
    console.log('@@@', storeToRefs(countStore));

    //数据
    let n = ref(1) //用户选择的数字

    function minus() {
       countStore.sum -= n.value  
    }
</script>

<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句土味情话</button>
        <ul>
            //下面这行里面不用写talkStore.talkList
            <li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li>
        </ul>
    </div>
</template>

<script setup lang="ts" name="LoveTalk">
    import { useLoveTalkStore } from '@/store/lovetalk';
    
    import { storeToRefs } from 'pinia';
    const {talkList} = storeToRefs(talkStore)

</script>

getters的使用

当state中的数据，需要经过处理后再使用时，可以使用getters配置

count.ts

export const useCountStore = defineStore('count', {
    //state真正存储数据的地方
    state() {
        return {
            sum: 6,
            school: 'beijing',
            address: 'chaoyang'
        }
    },
    getters: {
        // bigSum(state) {
        //     return state.sum * 10
        // },
        //第二种写法
        bigSum: state => state.sum * 10,

        upperSchool(state) {
            return state.school.toUpperCase()  //这里state改成this也可以
        }
    }
})

<template>
    <div class="count">
        <h2>当前求和为：{{sum}},放大十倍后{{ bigSum }}</h2>
        <h3>欢迎来到：{{ school }},大写为：{{ upperSchool }},坐落于{{ address }}</h3>
        <select name="" id="" v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>
</template>

<script setup lang="ts" name="Count">
    import { ref,toRefs } from 'vue';
    import { useCountStore } from '@/store/count'
    import { storeToRefs } from 'pinia';

    const countStore = useCountStore()
    //storeToRefs只会关注store中数据，不会对方法进行ref包裹
    const {sum,school,address,bigSum,upperSchool} = storeToRefs(countStore)

    //数据
    let n = ref(1) //用户选择的数字

</script>

$subscribe的使用

通过store的$subscribe()方法侦听state及其变化

<script setup lang="ts" name="LoveTalk">
    import { useLoveTalkStore } from '@/store/lovetalk';
    import { storeToRefs } from 'pinia';
    
    const talkStore = useLoveTalkStore()
    const { talkList } = storeToRefs(talkStore)
    talkStore.$subscribe((mutate,state) => {
        console.log('talkStore里面保存的数据发生了变化',mutate,state);
        localStorage.setItem('talkList',JSON.stringify(state.talkList))
    })
  
    //方法
    function getLoveTalk() {
        talkStore.getATalk()
    }
</script>

lovetalk.ts 可以不是放一个固定数组，去上面本地存储的获取的数据，但如果一开始本地啥都没有，就是null，如果null重新获取unshift就无法取得数据，所以加一个或者||[]给一个空数组。注意：前面必须加JSON.parse不然无法解析

import { defineStore } from 'pinia'
import axios from 'axios'
import { nanoid } from 'nanoid'

export const useLoveTalkStore = defineStore('talk', {
    actions: {
        async getATalk() {
            //发请求，下面这行写法是：连续解构+重命名
            let { data: { content: title } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
            // //把请求回来的字符，包装成一个对象
            let obj = { id: nanoid(), title } //简单写成title:content 上面let可以result改成 {data:{content}}；还可以进一步 title  {data:{content:title}}
            // //放到数组中
            this.talkList.unshift(obj)
        }
    },
    //state真正存储数据的地方
    state() {
        return {
            talkList: JSON.parse(localStorage.getItem('talkList') as string) || []
        }
    }
})
有点小懒懒
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3笔记 尚硅谷张天禹
03-07
Vue3笔记尚硅谷张天禹 markdown格式
Vue3尚硅谷天禹老师文档
07-08
Vue3尚硅谷天禹老师文档
vue项目中使用天地图
01-08
在Vue项目中集成天地图，可以为Web应用提供丰富的地理信息展示功能。下面将详细介绍如何在Vue项目中使用天地图，以及实现一些基本的地图操作。 首先，你需要在天地图的官方网站...
vue课件 b站老师.rar
06-24
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪（Evan You）开发，它以简单易用、组件化开发和高效性能著称。在这个"2019年最全最新Vue、Vuejs教程，从入门到精通"的课程中，你将能够深入学习Vue的核心概念和...
Web 性能入门指南 - 2.2 理解和改进最大内容绘制 (LCP)
weixin_43303603的博客
07-15 404
最大内容绘制 (LCP) 衡量的是页面上最大视觉元素的渲染时间。为了让 Google 满意，请将 LCP 时间控制在 2 秒以内。
＜Rust＞＜GUI＞rust语言GUI库tauri体验：前、后端结合创建一个窗口并修改其样式
用沸腾的热血，支付我们的人生吧！
07-16 1160
前言 本文是rust语言下的GUI库：tauri来创建一个窗口的简单演示，主要说明一下，使用tauri这个库如何创建GUI以及如何添加部件、如何编写逻辑、如何修改风格等，所以，这也是一个专栏，将包括tauri库的多个方面。 环境配置 系统：windows 平台：visual studio code 语言：rust、javascript、html、css 库：tauri概述 本文是tauri库系列博文的第一篇，主要是简单实现一个窗口程序并成功运行，当然，这是基于官方的示例，事实上官方给出的上手例程非常详细，不
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 176
【代码】博客前端项目学习day03——框架页。
基于 Gunicorn、Flask 和 Docker 的 Web 应用开发
2401_85639015的博客
07-19 805
Docker 是一个开源的应用容器引擎，它允许开发者打包他们的应用以及应用的运行环境到一个可移植的容器中。容器可以运行在任何支持 Docker 的机器上，确保了环境的一致性。通过本教程，你将学会如何使用 Docker、Gunicorn 和 Flask 构建一个高效、可扩展的 Web 应用。每个步骤都提供了详细的指导和示例代码，确保你能够理解和实践每个环节。希望本教程能够作为你进入微服务架构领域的起点。
前端性能优化--懒加载
weixin_43799793的博客
07-19 79
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 975
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
网站开发：使用VScode安装yarn包和运行前端项目
m0_67412019的博客
07-15 556
再次输入以下命令，无报错说明yarn安装成功。
原生html贪吃蛇？
weixin_52236586的博客
07-18 181
【代码】原生html贪吃蛇？
前端小项目-强调鼠标悬停时效果的名片
关注收藏，可以私信解决问题！
07-19 702
在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会如何使用HTML和CSS来创建一个具有动态效果的名片。
【简历】惠州某二本学院：前端简历指导，秋招面试通过率为0
shuize123的博客
07-16 656
因为基本上写网址简历的，直接会被扔掉，会让面试官觉得你要么是上过网课，要么是上过培训，因为现在特别是二本的简历，非常之多，所以HR会一直找一个条件，能够去筛选掉简历，同学说是专业的TOP2，那这个至少比98%的他们同校的同学要好，整体来讲的话，还是不错的，后面可以再补充一下放最好的奖项，，所以这个同学，在二本的这个小群体里面，也是在小公司的秋招里面，在教育背景这块，是可以比大部分二本同学要好一点的。，但是他不会给你减分，他有怀疑，但是他不确定的情况下，他是会给你机会往下去看的，
vue3前端开发-小兔鲜项目-一级页面banner图渲染
yrldjsbk的博客
07-19 219
其实，首页的banner渲染代码可以拿来复用的，只是区别在于，传递的接口参数不一样而已。我们的一级页面就可以成功拿到了后端接口反馈过来的一级栏目的banner图信息了。我们增加了一个参数对象params.而且做好了默认值的设置。（用的是一种解构赋值的模式）1：改造一下之前的获取banner的接口调用函数，增加一个参数对象。2：把之前HomeBanner.vue里面的代码，拿过来，在template里面新增banner的渲染模块内容。写好默认的值1.（不赋值的情况下，就是这个默认值1）3：修改完善页面内容。
React
weixin_45836841的博客
07-15 189
create-react-app（创建项目）：npx create-react-app xxx（xxx 项目名）
vue-print-nb 前端打印的一个实现方案
weixin_59685936的博客
07-19 346
vue-print-nb 前端打印的一个实现方案
使用JWT双令牌机制进行接口请求鉴权
北海之灵的博客
07-19 395
1.JWT的使用 2.双令牌模式 3.无感刷新 token
Web前端知识视频教程分享(三) JavaScript
最新发布
lilihexiaoxiangege的博客
07-19 99
Web前端知识视频教程分享(三) JavaScript
张天禹老师vue2笔记
08-11
根据引用中的信息，张天禹老师的Vue2笔记主要包括以下内容: 1. 脚手架文件结构: 包括了src文件夹、public文件夹、babel.config.js、package.json等文件，这些文件组成了Vue项目的基本结构。 2. Vue.js与vue....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值