1. 前言

1. Vue3大势不可阻挡,与之而来的就是Vite ,尤雨溪极力推荐的前端开发与构建工具
2. vue3原生支持TS ,所以TS语法和vue3TS语法学起来
3. vue中的vuex状态管理也用不顺手,看不顺眼了,换为Pinia
4. 文接上篇Vue3+Vite+Pinia-2-state修改
5. 之前一套流程pinia共享state,访问,修改算是基础的使用了,接下里说下不太常用的东西

---

2. getters

1. 和vuex的getters一样,当然也可以理解为 computed/计算属性,所以一般都是用于派生属性,或者过滤数据等操作
2. 典型的场景比如日期的格式化,前后端金钱的单位的转化,或者手机号,身份证,银行卡等敏感信息脱敏处理
3. 这里以手机号为例

import { defineStore } from "pinia";

export const helloStore = defineStore("hello", {
    // 必须用箭头函数
    state: () => ({
        name:'温言铁语',
        age: 71,
        phone:"18603038753",//手机号中间四位 *代替 脱敏处理
    }),
    actions:{
        updateState(){
            this.age ++
            this.name = 'yzs'
        }
    },
    getters:{
        starPhone(state){
            return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/ ,'$1****$2')
// this  state一样
           //return this.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/ ,'$1****$2')
        }
    }
});

4. 必须有返回值
5. getters不能用箭头函数,所以里面可以使用this
6. getters参数是 state

3. 组件 使用 getters

1. 没有套路,就直接使用
2. 解构赋值使用

<template>
    <div>
        <h1>Pinia语法</h1>
        <hr>
        <h1>直接使用</h1>
        <h3>姓名:{{ store.name }} ; 年龄:{{ store.age }}; 手机号:{{store.starPhone}}</h3>
        <hr>
        <h1>解构赋值---storeToRefs</h1>
        <h3>姓名:{{ name }} ; 年龄:{{ age }}; 手机号:{{starPhone}}</h3>
        <hr>
    </div>
</template>

<script setup lang="ts">
import { helloStore } from '../store/index'
import { storeToRefs } from 'pinia'
//  常规用法
const store = helloStore()

//  解构赋值用法
let { age, name ,starPhone} = storeToRefs(store)

</script>

<style scoped>
</style>

3. 界面显示 效果186****8753
4. 也具备计算属性的缓存特征

 getters:{
        starPhone(state){
            console.log("缓存---值一样不会被多次调用");
            return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/ ,'$1****$2')
        }
    }

5. 在 getters里面加个输出能看到控制台只输出了1次,值一样不会被多次调用

---

4. 修改getters

1. 修改按钮

 <button @click="phoneChange">getters 修改</button>

2. 事件函数

 // getters 修改
const phoneChange = ()=>{
    store.phone = "18338386477"
}

---

5. getters错误修改方式

1. storeToRefs 解构出的getters不能直接修改

       <h1>解构赋值---storeToRefs</h1>
        <h3>姓名:{{ name }} ; 年龄:{{ age }}; 手机号:{{starPhone}}</h3>
        <hr>
        <button @click="starPhone = '13938888803' ">getters 解构后直接修改 getters</button>


// js 解构赋值用法
let { age, name ,starPhone} = storeToRefs(store)

2. 计算属性只读的 只读.png

---

6. 总结 store

1. 代码结构

export const helloStore = defineStore("hello", {
    // 必须用箭头函数
    //state: () => ({ }),
     state:()=>{
          return {
        },
    actions:{ },
    getters:{ }
});

2. state: 就是用来存储全局状态
3. actions: 修改state的
4. getters: 依赖于state的数据,监视或者说是计算state变化的

---

7. 后记

1. 下个课件在来聊聊 多个 store的具体用法,其实类似vuex中的多个module
2. 一个store如何访问另外一个store

---

参考资料

Vite
Pinia
轻松搞定+Vue3+Vite+Pinia-1-state
轻松搞定+Vue3+Vite+Pinia-2-state-修改

---

初心

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

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

共勉