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()
