结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
1、安装:npm install pinia
2、创建store文件并配置内部的index.js文件
import { defineStore } from 'pinia' //引入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
4-1、 store.$reset()
将状态 重置 到其初始值
当我们接收到pinia数据且对其数据进行了大量修改又想还原时,调用此方法就可以将接收的pinia数据全部重置还原
注意:store. r e s e t ( ) ∗ ∗ 中的 s t o r e 是自己设定的接收变量,重点是 ∗ ∗ . reset()** 中的store是自己设定的接收变量,重点是 **. reset()∗∗中的store是自己设定的接收变量,重点是 ∗∗.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>
最后
编程基础的初级开发者,计算机科学专业的学生,以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念,以优化代码,提高编程技能。这份笔记都是可以作为参考的。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
念,以优化代码,提高编程技能。这份笔记都是可以作为参考的。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】