🐱 个人主页:不叫猫先生
🙋♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀!
💫优质专栏:vue3 + vite + TypeScript 从入门到实践
📢 资料领取:前端进阶资料可以找我免费领取
🔥 摸鱼学习交流:我们的宗旨是在工作中摸鱼,摸鱼中进步,期待大佬一起来摸鱼(文末有我wx或者私信)。
目录
Pinia官网介绍说:Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。Vuex同样可以作为状态管理工具,那么两者有什么区别呢?
一、Pinia与Vuex的区别
- pinia只有store、getter、actions,么有mutations,简化了状态管理的操作
- pinia模块划分不需要modules,
- pinia自动化代码拆分
- pinia对ts支持很好以及vue3的composition API
- pinia体积更小,性能更好
二、使用Pinia
defineStore( )
方法的第一个参数:容器的名字,名字必须唯一,不能重复
defineStore( )
方法的第二个参数:配置对象,放置state,getters,actions
state
属性: 用来存储全局的状态
getters
属性: 用来监视或者说是计算状态的变化的,有缓存的功能
actions
属性: 修改state全局状态数据,可以是异步也可以是同步
Pinia
可以用于vue2.x也可以用于vue3.x中
- 安装
yarn add pinia -S
main.js
引入
import {createApp} from "vue"
import App from "./app.vue"
import store from "./store/index.js"
const app = createApp(App);
import { createPinia } from "pinia";
const store = createPinia();
app.use(store).mount("#app")
- 在store文件夹下新建test.js
import {definePinia} from "pinia"
export default testStore = definePinia('testId',{
state:()=>{
tname:"test",
tnum:0,
},
getters:{
changeTnum(){
console.log("getters")
this.tnum++;
}
},
actions:{
addNum(val){
this.tnum += val
}
},
//持久化存储配置
presist:{
enable:true,//
strategies:[
{
key:"testId",
storage:localStorage,
paths:['tnum']
}
]
}
})
在用actions的时候,不能使用箭头函数,因为箭头函数绑定是外部的this。actions里的this指向当前store
- 在store文件夹下新建index.js,便于管理
import {createPinia} from "pinia"
const store = createPinia();
export default store
- 新建
A.vue
组件,引入store模块和storeToRefs
方法
storeToRefs
:解构store
中的数据,使之成为响应式数据
<template>
<div>
<div> {{tname}}</div>
<div> {{tid}}</div>
<div> tnum: {{tnum}}</div>
<div> {{tchangeNum}}</div>
<div><button @click="tchangeName">修改</button></div>
<div> <button @click="treset">重置</button></div>
<div @click="actionsBtn">actionsBtn</div>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store/user'
import { useTest } from '../store/test.js'
const testStore = useTest();
let { tname, tchangeNum, tnum } = storeToRefs(testStore)
</script>
三、直接修改数据的两种方式
直接修改数据与使用$path
修改数据相比,官方已经明确表示$patch
的方式是经过优化的,会加快修改速度,对程序的性能有很大的好处。所以如果你是多条数据同时更新状态数据,推荐使用$patch
方式更新。
虽然可以直接修改,但是出于代码结构来说, 全局的状态管理还是不要直接在各个组件处随意修改状态,应放于actions
中统一方法修改(piain没有mutation)。
//直接修改数据
tchangeName(){
tname.value = "测试数据";
tnum.value++;
}
//当然也可以使用`$path`批量修改
tchangeName(){
testStore.$path(state=>{
state.tname = "测试数据";
state.value = 7;
})
}
四、使用actions修改数据
直接调用actions
中的方法,可传参数
const actionsBtn = (){
testStore.addNum(5)
}
五、重置state中数据
store
中有$reset
方法,可以直接对store
中数据重置
const treset = (){
testStore.$reset()
}
六、Pinia持久化存储
总结
-
框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。
-
算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!