2024年最全Vue3中使用pinia_vue3 pinia，前端开发中常见的一些问题面试专题

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

//这里官网是单独导出 是可以写成默认导出的 官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱
export const useCar=defineStore(“test”,{
state: () =>{
return ({
msg:“这是pinia的数据”,
name:“小狮子”,
age:18
}) //为了避免出错，返回的值用()包起来
}
})

3、main.js文件中配置

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

const app=createApp(App)



import { createPinia } from 'pinia' //引入pinia
app.use(createPinia())

app.mount('#app') 

4、组件使用

<template>
	<h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1>
	<button @click="change1">修改store.name</button>
	<router-view></router-view>
	
</template>

<script setup>
	import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入
	let store=useCar() //接收
	 console.log(store)

	let change1=()=>{
		store.name="小羊" //修改pinia里面的数据
        console.log(store.name)
	}
	    
	    
</script>

<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

效果图

点击按钮，界面变化

说明成功修改了pinia里面的数据，且界面刷新证明这种直接修该pinia数据的方式依然是响应式数据。

但如果在接收pinia数据时，进行解构则不再是响应式数据，需要使用toRefs

toRefshttp://t.csdn.cn/pLB5f

4-1、 store.$reset()

将状态 重置 到其初始值

当我们接收到pinia数据且对其数据进行了大量修改又想还原时，调用此方法就可以将接收的pinia数据全部重置还原

注意：store.$reset()\ast \ast 中的store是自己设定的接收变量，重点是\ast \ast .$reset()

<template>
	<h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1>
	<button @click="change1">修改store.name</button>
	<button @click="reset">reset</button>
	<router-view></router-view>
	
</template>

<script setup>
	import {useCar} from "../store/car.js"
	let store=useCar()
	 console.log(store)
	let change1=()=>{
		store.name="小羊"
		console.log(store.name)
	}
	
	let reset=()=>{ //初始化pinia数据
		store.$reset()
	}
	    
	    
</script>

<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

在之前的案例中修改了pinia的name属性值

此时我们点击reset按钮，则会重置pinia的所有数据

4-2 store.$patch

群体修改，可以将pinia的数据进行同一修改

特点：批量修改但状态只刷新一次

<template>
	<h1>aaa--{{store.msg}}----{{store.name}}--{{store.age}}</h1>
	<button @click="change1">修改store.name</button>
	<button @click="reset">reset</button>
	<button @click="fn">fn</button>
	<router-view></router-view>
	
</template>

<script setup>
	import {useCar} from "../store/car.js"
	let store=useCar()
	 console.log(store)
	let change1=()=>{
		store.name="小羊"
		console.log(store.name)
	}
	
	let reset=()=>{ //重置
		store.$reset()
	}
	
	function fn(){
		//批量修改
		store.$patch({
		  name:"小羊",
		  age:20,
		})
	}
	    
	    
</script>

<style scoped>
	h1{
		width: 400px;
	    height:200px;
		background-color:deeppink;
	}
</style>

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-brKzOVDd-1715657302686)]

[外链图片转存中…(img-HFThx9B9-1715657302686)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】