1. 前言
-
Vue3大势不可阻挡,与之而来的就是Vite ,尤雨溪极力推荐的前端开发与构建工具
-
vue3原生支持TS ,所以TS语法和vue3TS语法学起来
-
vue中的vuex状态管理也用不顺手,看不顺眼了,换为Pinia
- 文接上篇Vue3+Vite+Pinia-1
2. Pinia改变state
2.1 store 定义state
- src/store/index.ts
- 紧接之前的文章我们再写一个数字增加的案例,这里用年龄表示,正好和上节课定义的name属性有所关联
import { defineStore } from "pinia";
export const helloStore = defineStore("hello", {
// 返回值
state: () => ({
name:'温言铁语' ,
age: 71
}),
});
- 不用写修改函数直接改起来,就是没有了之前
vuex的mutation
2.2 组件修改 state
- 没有套路,就直接改
<template>
<div>
<h1>Pinia语法</h1>
<hr>
<h1>姓名:{{store.name}} ; 年龄:{{store.age}}</h1>
<button @click="handleClick">日月如梭</button>
</div>
</template>
<script setup lang="ts">
import {helloStore} from '../store/index'
const store = helloStore()
const handleClick = ()=>{
store.age++
}
</script>
<style scoped>
</style>
3. 注意事项
let {age,name} = helloStore()
- 不能在使用
state的时候直接解构,原因就是破坏了内部的响应式数据结构, 了解 Vue3响应原理和2的区别
- v3的响应式数据都使用了 ref() toRefs()
- pinia有个
storeToRefs 组合式API,那就组到一起使用吧
<template>
<div>
<h1>Pinia语法</h1>
<hr>
<h1>姓名:{{store.name}} ; 年龄:{{store.age}}</h1>
<button @click="handleClick">日月如梭</button>
<hr>
<h1>姓名:{{name}} ; 年龄:{{age}}</h1>
<button @click="age++">日月如梭</button>
</div>
</template>
<script setup lang="ts">
import {helloStore} from '../store/index'
import {storeToRefs} from 'pinia'
// 常规用法
const store = helloStore()
const handleClick = ()=>{
store.age++
}
// 解构赋值用法
let {age,name} = storeToRefs(store)
</script>
<style scoped>
</style>
4. 同时修改多个 state数据
- 一次修改一个state数据,上面的方式非常简洁,但是如果同时修改多个数据,
pinia推荐使用 $patch
- 模板 新增2行布局
<template>
<div>
<h3>姓名:{{ store.name }} ; 年龄:{{ store.age }}</h3>
<!-- 和上面的布局一样的新增 下面2行 布局 -->
<h1>同时修改多个属性---$patch</h1>
<button @click="mutiChange">日月如梭</button>
</div>
</template>
- 脚本 新增一个点击事件,这个三元运算符,纯粹为了点击的时候名字能有变化,来回切换的效果
// 同时修改多个数据
const mutiChange = ()=>{
store.$patch({
age:store.age + 9, // 当然只修改一条数据也可以哦
name:store.age%2==0 ? '真正的勇士敢于直面惨淡的人生' : '初生牛犊不怕虎'
})
}
-
$patch只用来修改一条数据当然也可以,但是提现不出它的优势了,$patch是经过官方优化的,会加快速度修改,在你数据量小的时候体现不出来,但是在一些报表,图表类的会有感觉,所以我们写法规范,养成好的习惯
const handleClick = () => {
store.age++
store.name = store.age%2==0 ? '真正的勇士敢于直面惨淡的人生' : '初生牛犊不怕虎'
}
- 其实每次都感觉,我在写
React,Vue3也确实借鉴了React,在运行速度上,vue3也有赶超react的趋势,这个在vue2是不可能的,这也是尤大一直推Vue3的原因吧,目标就是青出于蓝而胜于蓝
5. $patch 函数式写法
- 想想
React 的setState()语法
- 参数是函数的: 这个函数的参数就是旧有的 state
- 有了state,你就可以在函数内部修改任何state数据
- 布局 在上面的布局代码上叠加
<hr>
<h1>$patch --参数函数</h1>
<button @click="chanegFn">日月如梭</button>
- 脚本
// 函数写法
const chanegFn = () => {
store.$patch((state) => {
state.age++
state.name = state.age % 2 == 0 ? '真正的勇士敢于直面惨淡的人生' : '初生牛犊不怕虎'
})
}
6. actions
- actions有点像之前的
mutaion,pinia里面一般是用作复杂逻辑的修改,给封装起来,外面用起来就比较方便
- /store/index.ts 文件
export const helloStore = defineStore("hello", {
// 这里必须箭头函数
state: () => ({
name:'温言铁语',
age: 71
}),
// 这里不能使用箭头
actions:{
updateState(){
// 可以修改多个 state数据
// 也可以单个修改
this.age ++
this.name = 'yzs'
}
}
});
- 组件内使用 就是调用这个函数,布局
<hr>
<h1>actions</h1>
<button @click="actionchaneg">actions修改</button>
- 事件函数
// actions
const actionchaneg = ()=>{
store.updateState()
}
7. 总结 Pinia修改数据的方式-4种
- 直接改
const store = helloStore()
store.age++
- 解构赋值
import { storeToRefs } from 'pinia'
// 解构赋值用法
let { age, name } = storeToRefs(store)
age++
- $patch
// 参数 对象
store.$patch({
age: store.age + 9, // 当然只修改一条数据也可以哦
name: store.age % 2 == 0 ? '真正的勇士敢于直面惨淡的人生' : '初生牛犊不怕虎'
})
// 参数函数
store.$patch((state) => {
state.age++
state.name = state.age % 2 == 0 ? '真正的勇士敢于直面惨淡的人生' : '初生牛犊不怕虎'
})
}
- actions
// store配置
actions:{
updateState(){
this.age ++
this.name = 'yzs'
}
}
// 组件使用
store.updateState()
参考资料
Vite
Pinia
轻松搞定+Vue3+Vite+Pinia-1
初心
我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
