学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes
觉得有帮助的同学，可以点心心支持一下哈（笔记是根据b站上学习的尚硅谷的前端视频【张天禹老师】，记录一下学习笔记，用于自己复盘，有需要学习的可以去b站学习原版视频）
一、准备一个效果
App组件：
<template>
<Count></Count>
<br />
<LoveTalk></LoveTalk>
</template>
<script setup lang="ts" name="App">
import Count from './components/Count.vue'
import LoveTalk from './components/LoveTalk.vue'
</script>
<style scoped></style>Count组件：
<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>
</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 {
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
background-color: skyblue;
}
select,
button {
margin: 0px 5px;
height: 25px;
}
</style>LoveTalk组件：
<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'
import { title } from 'process'
// 数据
let talkList = reactive([
{
id: 'wad1',
title: '莫文蔚的阴天，孙燕姿的雨天，周杰伦的晴天，都不如你和我聊天。'
},
{
id: 'wad2',
title: '“你为什么要害我?”“害你什么?”“害我那么喜欢你!”'
},
{
id: 'wad3',
title: '你知道你和星星有什么区别吗?星星在天上，你在我心里。'
}
])
// 方法
async function getLoveTalk () {
// 发请求
let result = await axios.get(
'https://api.uomg.com/api/rand.qinghua?format=json'
)
// 把请求回来的字符串，包装成一个对象
let obj = { id: nanoid(), title: result.data.content }
talkList.unshift(obj)
}
</script>
<style scoped>
.talk {
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
background-color: orange;
}
select,
button {
margin: 0px 5px;
height: 25px;
}
</style>
二、搭建 pinia 环境
第一步：npm install pinia
第二步：操作src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'
/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)
/* 使用插件 */{}
app.use(pinia)
app.mount('#app')此时开发者工具中已经有了pinia选项
三、存储+读取数据
- Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。
- 它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。
- 具体编码：src/store/count.ts
import { defineStore } from "pinia";
export const useCountStore = defineStore("count", {
// 真正存储数据的地方
state() {
return {
sum: 6,
};
},
});- 具体编码：src/store/talk.ts
// 引入defineStore用于创建store
import { defineStore } from "pinia";
// 定义并暴露一个store
export const useTalkStore = defineStore("talk", {
// 动作
actions: {},
// 状态
state() {
return {
talkList: [
{
id: "wad1",
title: "莫文蔚的阴天，孙燕姿的雨天，周杰伦的晴天，都不如你和我聊天。",
},
{
id: "wad2",
title: "“你为什么要害我?”“害你什么?”“害我那么喜欢你!”",
},
{
id: "wad3",
title: "你知道你和星星有什么区别吗?星星在天上，你在我心里。",
},
],
};
},
});- 组件中使用state中的数据
<template>
<div class="count">
<h2>当前求和为：{{ sumStore.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 } from 'vue'
import { useCountStore } from '@/store/count'
// 数据
let sumStore = useCountStore()
let n = ref(1) //用户选择的数据
// 方法
function add () {
sumStore.sum += n.value
}
function minus () {
sumStore.sum -= n.value
}
</script><template>
<div class="talk">
<button @click="getLoveTalk">获取一句土味情话</button>
<ul>
<li v-for="talk in talkStore.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'
import { useTalkStore } from '@/store/talk'
// 数据
let talkStore = useTalkStore()
// 方法
async function getLoveTalk () {
// 发请求
let result = await axios.get(
'https://api.uomg.com/api/rand.qinghua?format=json'
)
// 把请求回来的字符串，包装成一个对象
let obj = { id: nanoid(), title: result.data.content }
talkStore.talkList.unshift(obj)
}
</script>
四、修改数据(三种方式)
- 第一种修改方式，直接修改countStore.sum = 666
- 第二种修改方式：批量修改
countStore.$patch({
sum:999,
school:'atguigu'
})- 第三种修改方式：借助action修改（action中可以编写一些业务逻辑）
import { defineStore } from 'pinia'
export const useCountStore = defineStore('count', {
/*************/
actions: {
//加
increment(value:number) {
if (this.sum < 10) {
//操作countStore中的sum
this.sum += value
}
},
//减
decrement(value:number){
if(this.sum > 1){
this.sum -= value
}
}
},
/*************/
})- 组件中调用action即可
// 使用countStore
const countStore = useCountStore()
// 调用对应action
countStore.incrementOdd(n.value)五、storeToRefs
- 借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。
- 注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中所有数据包括方法。
<template>
<div class="count">
<h2>当前求和为：{{sum}}</h2>
</div>
</template>
<script setup lang="ts" name="Count">
import { useCountStore } from '@/store/count'
/* 引入storeToRefs */
import { storeToRefs } from 'pinia'
/* 得到countStore */
const countStore = useCountStore()
/* 使用storeToRefs转换countStore，随后解构 */
const {sum} = storeToRefs(countStore)
</script>六、getters
- 概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。
- 追加getters配置。
// 引入defineStore用于创建store
import {defineStore} from 'pinia'
// 定义并暴露一个store
export const useCountStore = defineStore('count',{
// 动作
actions:{
/************/
},
// 状态
state(){
return {
sum:1,
school:'atguigu'
}
},
// 计算
getters:{
bigSum:(state):number => state.sum *10,
upperSchool():string{
return this. school.toUpperCase()
}
}
})- 组件中读取数据：
const {increment,decrement} = countStore
let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)七、$subscribe（订阅）
通过 store 的 $subscribe() 方法侦听 state 及其变化，类似于watch
mutate：本次修改的信息
state：真正修改的数据
talkStore.$subscribe((mutate, state) => {
localStorage.setItem('talkList', JSON.stringify(talkList.value))
})八、store组合式写法
import { defineStore } from "pinia";
import axios from "axios";
import { nanoid } from "nanoid";
import { reactive } from "vue";
export const useTalkStore = defineStore("talk", () => {
// talkList就是state
const talkList = reactive(
JSON.parse(localStorage.getItem("talkList") as string) || []
);
// getATalk函数相当于action
async function getLoveTalk() {
// 发请求，下面这行的写法是：连续解构赋值+重命名
let {
data: { content: title },
} = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json");
// 把请求回来的字符串，包装成一个对象
let obj = { id: nanoid(), title };
// 放到数组中
talkList.unshift(obj);
}
return { talkList, getLoveTalk };
});
![[Algorithm][动态规划][路径问题][不同路径][不同路径Ⅱ][珠宝的最高价值]详细讲解](https://img-blog.csdnimg.cn/direct/ec3c5fa9e1ed4768818e45f6a98c52ec.png)
