【Vue3(八）】

最新推荐文章于 2024-09-25 21:10:43 发布
最新推荐文章于 2024-09-25 21:10:43 发布
阅读量778 收藏 6
点赞数 4
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46123285/article/details/137082473
版权

文章目录

前言

一、示例效果

实现如下效果：
在这里插入图片描述
创建两个组件，在App.vue里引入

<template>
  <div>
    <Count/>
    <br>
    <LoveTalk/>
  </div>
</template>

<script lang="ts" setup name="App">


import LoveTalk from "@/components/LoveTalk.vue";
import Count from "@/components/Count.vue";
</script>
<style scoped>

</style>

计算组件Count.vue

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

<script lang="ts" setup name="Count">
import {ref} from "vue";

// 数据
let sum = ref(1)  // 当前求和
let n = ref(1)    //  用户选择的数字

function add(){
  sum.value += n.value

}
function minus(){
  sum.value -= n.value
}


</script>
<style scoped>
.count{
  background-color: aquamarine;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px
}
select,button{
  margin:0 5px;
  height: 25px;
}
</style>

在土味情话的组件LoveTalk.vue里，要npm i nanoid

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

<script lang="ts" setup name="LoveTalk">
import {reactive} from "vue";
import axios from "axios";
import {nanoid} from 'nanoid'

let talkList = reactive([
    {id:'001',title:'你今天有点怪，怪好看的'},
  {id:'002',title:'草莓，蓝莓，蔓越莓，今天想我没'},
  {id:'003',title:'心里留了一块地'}
  ])

async function getLove(){
  // let result = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    // 发请求，下面这行写法是：连续解构赋值+重命名
    let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
  // console.log(result.data)
  // 把请求回来的字符串，包装成一个对象
    let obj = {id:nanoid(),title}
  // let obj = {id:nanoid(),title:result.data.content}
  // console.log(obj)
  // 放到数组中
  talkList.unshift(obj)

}
</script>
<style scoped>
.talk{
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px
}
</style>

二、搭建pinia环境

vue2用vuex,vue3用pinia,都是集中式状态（数据）管理
先下载npm i pinia,在main.ts里引入pinia,创建pinia，安装pinia
main.ts


// 引入createApp用于创建应用，相当于花盆
import { createApp } from 'vue'

// 引入App根组件放在应用
// @ts-ignore  用于告诉TypeScript编译器忽略某个特定错误或警告
import App from './App.vue'

// 第一步：引入pinia
// @ts-ignore

import { createPinia } from 'pinia';



// 创建一个应用
const app = createApp(App)
// 第二步：创建pinia
const pinia = createPinia();
// 第三步：安装pinia
app.use(pinia)

// 挂载到整个应用到app容器中
app.mount('#app')

三、存储+读取数据

在src下新建store文件，新建count.ts和lovetalk.ts分别存放相关内容数据。在ts文件里引入defineStore，将定义的方法暴露出去
count.ts

import {defineStore} from "pinia";

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

        }
    }
})

lovetalk.ts

import {defineStore} from "pinia";


export  const useTalkStore = defineStore('talk',{
    // 真正存储数据的地方
    state(){
        return {
            talkList:[
                {id:'001',title:'你今天有点怪，怪好看的'},
                {id:'002',title:'草莓，蓝莓，蔓越莓，今天想我没'},
                {id:'003',title:'心里留了一块地'}

            ]
        }
    }
})

在相关组件里引入ts文件定义的方法并使用

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

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

const countStore = useCountStore()

// 以下两种方式都可拿到state中数据
// console.log('@@@',countStore.sum)
// console.log('@@@',countStore.$state.sum)

// // 若ref在reactive里，则被拆包，打印时不用加.value；若自己定义的，需要.value
// let obj = reactive({
//   a:1,
//   b:2,
//   c:ref(3)
// })
// let x = ref(9)
// console.log(obj.a)
// console.log(obj.b)
// console.log(obj.c)
// console.log(x.value)

// 数据

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

function add(){


}
function minus(){

}


</script>
<style scoped>
.count{
  background-color: aquamarine;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px
}
select,button{
  margin:0 5px;
  height: 25px;
}
</style>



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

<script lang="ts" setup name="LoveTalk">
import {useTalkStore} from "@/store/lovetalk";
import {reactive} from "vue";
import axios from "axios";
import {nanoid} from 'nanoid'

const talkStore = useTalkStore()


async function getLove(){
  // let result = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    // 发请求，下面这行写法是：连续解构赋值+重命名
  //  let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
  // console.log(result.data)
  // 把请求回来的字符串，包装成一个对象
 //   let obj = {id:nanoid(),title}
  // let obj = {id:nanoid(),title:result.data.content}
  // console.log(obj)
  // 放到数组中
  //talkList.unshift(obj)

}
</script>
<style scoped>
.talk{
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px
}
</style>

在这里插入图片描述
在这里插入图片描述

四、修改数据

添加学校和地址，实现修改功能
Count.vue

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

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

const countStore = useCountStore()


// 数据

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

function add(){
  // 第一种修改方式
  // countStore.sum += 1
  // countStore.school = 'school'
  // countStore.address = '未知'

  // 第二种修改方式，针对数据多的情况，批量修改
  // countStore.$patch({
  //   sum:888,
  //   school: '北京大学',
  //   address: '北京'
  // })

  // 第三种修改方式
  countStore.increment(n.value)


}
function minus(){

}

</script>
<style scoped>
.count{
  background-color: aquamarine;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px
}
select,button{
  margin:0 5px;
  height: 25px;
}
</style>

以下是第一种修改方法和第二种修改方法的区别
在这里插入图片描述
在这里插入图片描述
第三种方法需要在count.ts添加actions

import {defineStore} from "pinia";

export const useCountStore = defineStore('count',{
    // actions里面放置的是一个一个的方法，用于响应组件中动作
    actions:{
        increment(value){
            console.log('increment被调用了',value)
            if (this.sum < 10){
                // 修改数据(this是当前的store）
                this.sum += value
            }
        }
    },
    // 真正存储数据的地方
    state(){
        return {
            sum:6,
            school:'清华',
            address:'北京'

        }
    }
})

五、storeToRefs

想要变成响应式，就要以下操作，注意toref()和storeToRefs()区别
在这里插入图片描述
在这里插入图片描述

代码如下（示例）：

六、getters的使用

当state中的数据，需要经过处理后再使用时，可以使用getters配置
在count.ts文件里添加getters

import {defineStore} from "pinia";

export const useCountStore = defineStore('count',{
    // actions里面放置的是一个一个的方法，用于响应组件中动作
    actions:{
        increment(value:number){
            console.log('increment被调用了',value)
            if (this.sum < 10){
                // 修改数据(this是当前的store）
                this.sum += value
            }
        }
    },
    // 真正存储数据的地方
    state(){
        return {
            sum:1,
            school:'qinghua',
            address:'北京'

        }
    },
    getters:{
        // 使用this就不能使用箭头函数
        bigSum:state => {
            return state.sum *10
        },
        upperSchool(state){
            return this.school.toUpperCase()

        }
    }
})

若不写state参数，就要upperSchool():string{}
在这里插入图片描述

七、$subsccribe的使用

LoveTalk.vue

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

<script lang="ts" setup name="LoveTalk">
import {useTalkStore} from "@/store/lovetalk";
import {storeToRefs} from "pinia";

const talkStore = useTalkStore()
const {talkList} = storeToRefs(talkStore)

talkStore.$subscribe((mutate,state)=>{
  console.log('talkStore里面保存的数据发生了变化',mutate,state)
  // 浏览器本地存储,localStorage底层传的都是字符串，若传的不是字符串，会调用toString
  localStorage.setItem('talkList',JSON.stringify(state.talkList))

})

 function getLove(){
  talkStore.getATalk()

}
</script>
<style scoped>
.talk{
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px
}
</style>

lovetalk.ts

import {defineStore} from "pinia";
import axios from "axios";
import {nanoid} from "nanoid";


export  const useTalkStore = defineStore('talk',{
    actions:{
         async getATalk(){
            // let result = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
            // 发请求，下面这行写法是：连续解构赋值+重命名
              let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
            // console.log(result.data)
            // 把请求回来的字符串，包装成一个对象
               let obj = {id:nanoid(),title}
            // let obj = {id:nanoid(),title:result.data.content}
            // console.log(obj)
            // 放到数组中
            this.talkList.unshift(obj)
        }
    },
    // 真正存储数据的地方
    state(){
        return {
            // 数据不丢失
            talkList:JSON.parse(localStorage.getItem('talkList')as string) || []
        }
    }
})

在这里插入图片描述

八、store组合式写法

在这里插入图片描述
在这里插入图片描述
组合式记得return

—丫丫
关注
专栏目录
【VUE】Vue3项目中Pinia状态管理工具的使用
编码世界
10-30 6836
官网介绍说：Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。的方式是经过优化的，会加快修改速度，对程序的性能有很大的好处。虽然可以直接修改，但是出于代码结构来说， 全局的状态管理还是不要直接在各个组件处随意修改状态，应放于。方法的第二个参数：配置对象，放置state，getters，actions。属性： 修改state全局状态数据，可以是异步也可以是同步。方法的第一个参数：容器的名字，名字必须唯一，不能重复。属性： 用来监视或者说是计算状态的变化的，有缓存的功能。
【vue3】基础知识点-pinia
花椒和蕊的博客
08-09 1655
vue3基础知识点-pinia
vue3中storeToRefs让store中的结构出来的数据也能变成响应式
最新发布
jjw_zyfx的博客
09-25 324
vue3中storeToRefs让store中的结构出来的数据也能变成响应式
Vue3:状态管理-Store(Vuex,Pinia)
weixin_62364503的博客
09-20 1万+
Vue3 状态管理（Vuex，pinia）
【Vue3】Pinia $subscribe
又言又语
08-07 498
本文介绍 Vue3 中如何使用 Pinia$subscribe实现state数据监听。Pinia 是 Vue 专属的状态管理库，允许跨组件或页面共享数据。
【Vue3】$subscribe订阅与反应
null18的博客
04-18 1093
订阅是Vue3中非常重要的概念，它实现了数据的响应式更新，是实现MVVM模式的关键。合理地使用订阅可以提高代码的可维护性和可读性，帮助开发者更好地管理数据与视图的关系挑战与创造都是很痛苦的，但是很充实。
30 vue3 Pinia对state的订阅监听（$subscribe）
热门推荐
本以为成功很简单，没想到活成普通人都需拼尽全力！
03-13 2万+
上一篇： 29 vue3 Pinia--getters的使用_十一月的萧邦-CSDN博客 基本的使用已经记录完毕了，本篇记录 Pinia对store数据进行的订阅监听，更直白点说，当store中的state变化到我们想要的那个值时，我们需要去做些什么，那么我们就需要用到$subscribe 1. 新建vue3项目，安装Pinia，配置Pinia，不再多说了，不会的可以看官网也可以看我前面的几篇记录文章 2. app.js---首先声明了一个state：baseUrl,写了一个action方法，用于改
Vue3 pinia使用$subcribe做持久化处理
qq_46159033的博客
07-22 613
Vue3 pinia使用$subcribe做持久化处理
海康威视有插件版本-vue3集成开发，可云台控制
02-02
在这个项目中，原本的jQuery代码已被转换成适应Vue3的格式，这意味着代码结构更符合现代前端开发的最佳实践，同时也利用了Vue3的优势。 接下来，我们讨论“云台控制”这一功能。云台是摄像头的一个重要组成部分，它...
vue 3 学习笔记 vue3 vue3学习笔记
10-18
Vue 3 学习笔记 本文是关于 Vue 3 的学习笔记，涵盖了 Vue 3 的基础知识点，包括 Setup、Reactive、Ref、计算属性、Watch、生命周期函数、父子组件通信、Hook 等。 一、Setup Setup 是 Vue 3 中的组合式 API 的...
Vue3通透教程【八】获取DOM、操作组件
官方推荐
03-09 1万+
凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事尤大大对前端生态是这样看的。
一个基于Vue3的可视化监控大屏项目.zip
02-19
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 ... 【项目质量】： 所有源码都经过严格测试，...
【三十天精通Vue 3】第八天 Vue 3 生命周期函数详解
陈书予
04-14 9758
生命周期钩子是 Vue 3 新增的一种特性，它允许开发者在组件的创建和更新过程中执行自定义代码。在 Vue 3 中，组件的生命周期分为七个钩子函数，分别是 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。这些钩子函数在不同的生命周期阶段执行，可以用于更新组件、处理事件、处理数据等。
Vue3：重构Pinia的store，使用组合式写法实现
Brave_heart4pzj的博客
04-02 549
Vue
vue3的store使用学习
W_j_134567的博客
08-07 1007
在vue-vben-admin的项目基础上进行修改，在src/store/modules目录下添加dept.ts的store文件，保存和获取选择的id，用到了state,getters,actions.actions里添加setSelectedDept(),保存传入的id和name,getters里添加getDeptId(),getDeptName()获取id和name。在页面模块引入import { useDeptStore } from '/src/store/modules/dept';
在vue3中使用pinia 1.pinia基础用法 2.修改state中数据的多种方法 3.$subscribe 监听state中值的变化
不染-9732
06-20 2535
在vue3中使用pinia 1.pinia基础用法 2.修改state中数据的多种方法 3.$subscribe 监听state中值的变化
Vue3 使用存储库Pinia（state）
不靠谱的作曲家
07-13 605
【代码】Vue3 使用存储库Pinia（state）
vue3 store 存储使用
weixin_45691697的博客
12-05 1174
vue3 store 存储使用方法
vue3-pinia
qq_59634946的博客
02-02 526
Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。
Vue3+ElementPlus开发商城后台管理系统实战教程
资源摘要信息:"Vue3实战商城后台管理系统开发" 知识点一：Vue3介绍与优势 Vue.js是一个流行的JavaScript框架，用于构建用户界面和单页应用程序。Vue3作为Vue.js的最新版本，它带来了许多新特性，比如组合式API...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值