1.新的状态管理工具pinia
Pinia 是一个状态管理库,通俗点讲,它的主要作用就是帮助我们在 Vue 3 应用中更好地管理和维护组件的状态。
举例子解释:
新建一个Count.vue文件,功能用来计数求和。
<template>
<div class="count">
<h2>当前求和为:{{ sum }}</h2>
<select v-model="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 } 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: skyblue;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
select,button {
margin: 0 5px;
height: 25px;
}
</style>
注意点1:
这样写不是加数字2,而是字符'串'2"。自然数字完成的不是叠加。
修改方式一:
加上":",让后面的变成了表达式而不是字符。
修改方式二:
将输入的转换成数字(这种方式比较正统)
新建一个LoveTalk.vue文件
LoveTalk.vue代码:
<!-- 模板部分 -->
<template>
<div class="talk">
<!-- 定义一个按钮,当点击时调用 getLoveTalk 方法 -->
<button @click="getLoveTalk">获取一句土味情话</button>
<!-- 定义一个无序列表,用于展示 talkList 中的土味情话 -->
<ul>
<li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li>
</ul>
</div>
</template>
<!-- 脚本部分 -->
<script setup lang="ts" name="LoveTalk">
// 引入 Vue 的 reactive 函数,用于创建响应式数据
import {reactive} from 'vue'
// 引入 axios,一个基于 Promise 的 HTTP 客户端,用于发送网络请求
import axios from "axios";
// 引入 nanoid 库,用于生成唯一的字符串作为 ID
import {nanoid} from 'nanoid'
// 使用 reactive 创建响应式数组 talkList,用于存储土味情话
let talkList = reactive([
// 初始化 talkList,包含一些示例的土味情话
{id:'ftrfasdf01',title:'今天你有点怪,哪里怪?怪好看的!'},
{id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓,今天想我了没?'},
{id:'ftrfasdf03',title:'心里给你留了一块地,我的死心塌地'}
])
// 定义一个异步函数 getLoveTalk,用于获取新的土味情话
async function getLoveTalk(){
// 使用 await 等待 axios.get 的结果,并解构赋值获取数据内容
// 这里假设返回的数据结构是 {data:{content:''}}
let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
// 使用 nanoid 生成一个唯一的 ID
let obj = {id:nanoid(),title}
// 将新获取的土味情话(包装成对象后)插入到 talkList 数组的最前面
talkList.unshift(obj)
}
</script>
//样式
<style scoped>
.talk {
background-color: orange;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
</style>
-
设置按钮点击事件:在按钮上使用了
@click
指令,绑定了一个名为getLoveTalk
的方法,当按钮被点击时,会调用这个方法。 -
定义响应式数据:在
<script setup>
标签中,首先导入了reactive
函数和axios
、nanoid
库。然后,使用reactive
创建了一个响应式数组talkList
,并初始化了几个示例的土味情话。 -
定义异步方法:定义了一个名为
getLoveTalk
的异步方法。这个方法首先通过axios.get
发送一个 HTTP GET 请求到指定的 API 地址,以获取新的土味情话。 -
处理请求结果:当请求成功后,使用解构赋值从响应数据中提取出
content
的值,并将其重命名为title
。 -
生成唯一 ID:使用
nanoid
函数生成一个唯一的 ID,用于新获取的土味情话对象。 -
更新响应式数据:将新获取的土味情话(包括生成的 ID 和标题)包装成一个对象,并使用
unshift
方法将这个新对象插入到talkList
数组的最前面。 -
列表渲染:在模板中,使用
v-for
指令遍历talkList
数组,并为每个元素创建一个列表项,显示其title
属性。 -
响应式更新:由于
talkList
是响应式的,当数组内容发生变化时,Vue 会自动更新 DOM,展示最新的土味情话列表。
这样,每当用户点击按钮时,组件就会发送请求获取新的土味情话,并将其添加到列表的最前面,实现了动态获取和展示土味情话的功能。
展示:
2.安装pinia环境
在终端安装pinia环境
在main.ts文件安装pinia
安装好后在Vue组件看见一个可爱的菠萝🍍图表
main.ts代码:
import {createApp} from 'vue'
import App from './App.vue'
// 第一步:引入pinia
import {createPinia} from 'pinia'
const app = createApp(App)
// 第二步:创建pinia
const pinia = createPinia()
// 第三步:安装pinia
app.use(pinia)
app.mount('#app')
我丢,好可爱的菠萝🍍
3.存取+读取数据
步骤:
1.新建store文件夹
2.在此文件夹下新建count.ts文件
Pinia中的store用于组织和管理组件间的共享状态。通过useCountStore
函数,我们可以在Vue组件的setup
函数中获取这个store的实例,进而读取或修改sum
状态的值。
3.在Count.vue文件进行修改。
注意:因为countStore是reactive对象,sum作为ref包装的实例对象是被包括countStore在里面的
所以会被拆包,就不用sum.value。
通俗点说就是ref对象被包含在reactive对象里面就不用进行.value了。
<template>
<div class="count">
<h2>当前求和为:{{ countStore.sum }}</h2>
<select 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,reactive } from "vue";
import {useCountStore} from '@/store/count'
import { storeToRefs } from "pinia";
const countStore = useCountStore()
// 数据
let n = ref(1) // 用户选择的数字
// 方法
function add(){
countStore.sum += n.value
function minus(){
countStore.sum -= n.value
}
</script>
<style scoped>
.count {
background-color: skyblue;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
select,button {
margin: 0 5px;
height: 25px;
}
</style>
4.读取成功
4.修改数据的三种方式
在count.s文件修改数据
第一种修改方式:
第二种修改方式(有比较多的数据时)
1.在count.ts增添两个数据
2.在Count.vue中修改
当点击按钮"加"时,触发点击事件的加法方法(就刚刚编写的第二种修改方法)
补充:
在第一种修改方式的基础上其实也可以进行,但是会添加修改的次数,就是浏览器要对每个数据信息修改一次,相当于三次。
但是使用$patch就可以进行批量修改。
第三种修改方式:action
1.在count.ts文件修改
2.在Count.vue文件进行调用
展示如下
补充:
action可以设置极限值
应用场景可以在某些条件下设置限定,当然在第二种方式上也可以。