1. 前言

1. Vue3大势不可阻挡,与之而来的就是Vite ,尤雨溪极力推荐的前端开发与构建工具
2. vue3原生支持TS ,所以TS语法和vue3TS语法学起来
3. vue中的vuex状态管理也用不顺手,看不顺眼了,换为Pinia
4. 文接上篇Vue3+Vite+Pinia-1

2. Pinia改变state

2.1 store 定义state

1. src/store/index.ts
2. 紧接之前的文章我们再写一个数字增加的案例,这里用年龄表示,正好和上节课定义的name属性有所关联

import { defineStore } from "pinia";
export const helloStore = defineStore("hello", {
    // 返回值
    state: () => ({
         name:'温言铁语' ,
         age: 71
   }),
});

3. 不用写修改函数直接改起来,就是没有了之前vuex的mutation

2.2 组件修改 state

1. 没有套路,就直接改

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

1. 不能在使用state的时候直接解构,原因就是破坏了内部的响应式数据结构, 了解 Vue3响应原理和2的区别
2. v3的响应式数据都使用了 ref() toRefs()
3. 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数据

1. 一次修改一个state数据,上面的方式非常简洁,但是如果同时修改多个数据,pinia推荐使用 $patch
2. 模板 新增2行布局

<template>
    <div>
         <h3>姓名:{{ store.name }} ; 年龄:{{ store.age }}</h3>
        <!--  和上面的布局一样的新增 下面2行 布局 -->
        <h1>同时修改多个属性---$patch</h1>
        <button @click="mutiChange">日月如梭</button>
    </div>
</template>

3. 脚本 新增一个点击事件,这个三元运算符,纯粹为了点击的时候名字能有变化,来回切换的效果

//  同时修改多个数据
const mutiChange = ()=>{
    store.$patch({
        age:store.age + 9, // 当然只修改一条数据也可以哦
        name:store.age%2==0   ?  '真正的勇士敢于直面惨淡的人生' :  '初生牛犊不怕虎'
    })
}

4. $patch只用来修改一条数据当然也可以,但是提现不出它的优势了,$patch是经过官方优化的,会加快速度修改,在你数据量小的时候体现不出来,但是在一些报表,图表类的会有感觉,所以我们写法规范,养成好的习惯

const handleClick = () => {
    store.age++
    store.name = store.age%2==0   ?  '真正的勇士敢于直面惨淡的人生' :  '初生牛犊不怕虎'
}

5. 其实每次都感觉,我在写React,Vue3也确实借鉴了React,在运行速度上,vue3也有赶超react的趋势,这个在vue2是不可能的,这也是尤大一直推Vue3的原因吧,目标就是青出于蓝而胜于蓝

5. $patch 函数式写法

1. 想想React 的setState()语法
2. 参数是函数的: 这个函数的参数就是旧有的 state
3. 有了state,你就可以在函数内部修改任何state数据
4. 布局 在上面的布局代码上叠加

        <hr>
        <h1>$patch --参数函数</h1>
        <button @click="chanegFn">日月如梭</button>

5. 脚本

// 函数写法
const chanegFn = () => {
    store.$patch((state) => {
        state.age++
        state.name = state.age % 2 == 0 ? '真正的勇士敢于直面惨淡的人生' : '初生牛犊不怕虎'
    })
}

6. actions

1. actions有点像之前的mutaion,pinia里面一般是用作复杂逻辑的修改,给封装起来,外面用起来就比较方便
2. /store/index.ts 文件

export const helloStore = defineStore("hello", {
// 这里必须箭头函数
    state: () => ({
        name:'温言铁语',
        age: 71
    }),
// 这里不能使用箭头
    actions:{
        updateState(){
// 可以修改多个 state数据 
// 也可以单个修改
            this.age ++
            this.name = 'yzs'
        }
    }
});

3. 组件内使用 就是调用这个函数,布局

        <hr>
        <h1>actions</h1>
        <button @click="actionchaneg">actions修改</button>

4. 事件函数

//  actions
const actionchaneg = ()=>{
    store.updateState()
}

7. 总结 Pinia修改数据的方式-4种

1. 直接改

const store = helloStore()
store.age++

2. 解构赋值

import { storeToRefs } from 'pinia'
//  解构赋值用法
let { age, name } = storeToRefs(store)
age++

3. $patch

// 参数 对象
 store.$patch({
        age: store.age + 9, // 当然只修改一条数据也可以哦
        name: store.age % 2 == 0 ? '真正的勇士敢于直面惨淡的人生' : '初生牛犊不怕虎'
    })
// 参数函数
    store.$patch((state) => {
        state.age++
        state.name = state.age % 2 == 0 ? '真正的勇士敢于直面惨淡的人生' : '初生牛犊不怕虎'
    })
}

4. actions

// store配置
  actions:{
        updateState(){
            this.age ++
            this.name = 'yzs'
        }
    }
// 组件使用
  store.updateState()

参考资料

Vite
Pinia
轻松搞定+Vue3+Vite+Pinia-1

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉