1. 前言
Vue3大势不可阻挡,与之而来的就是Vite ,尤雨溪极力推荐的前端开发与构建工具vue3原生支持TS ,所以TS语法和vue3TS语法学起来vue中的vuex状态管理也用不顺手,看不顺眼了,换为Pinia- 文接上篇Vue3+Vite+Pinia-2-state修改
- 之前一套流程
pinia共享state,访问,修改算是基础的使用了,接下里说下不太常用的东西
2. getters
- 和
vuex的getters一样,当然也可以理解为computed/计算属性,所以一般都是用于派生属性,或者过滤数据等操作- 典型的场景比如日期的格式化,前后端金钱的单位的转化,或者手机号,身份证,银行卡等敏感信息
脱敏处理- 这里以手机号为例
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') } } });
- 必须有返回值
- getters不能用箭头函数,所以里面可以使用this
- getters参数是
state
3. 组件 使用 getters
- 没有套路,就直接使用
- 解构赋值使用
<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>
- 界面显示 效果186****8753
- 也具备计算属性的缓存特征
getters:{ starPhone(state){ console.log("缓存---值一样不会被多次调用"); return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/ ,'$1****$2') } }
- 在 getters里面加个输出能看到控制台只输出了1次,值一样不会被多次调用
4. 修改getters
- 修改按钮
<button @click="phoneChange">getters 修改</button>
- 事件函数
// getters 修改 const phoneChange = ()=>{ store.phone = "18338386477" }
5. getters错误修改方式
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)
- 计算属性只读的
只读.png
6. 总结 store
- 代码结构
export const helloStore = defineStore("hello", { // 必须用箭头函数 //state: () => ({ }), state:()=>{ return { }, actions:{ }, getters:{ } });
- state: 就是用来存储全局状态
- actions: 修改state的
- getters: 依赖于state的数据,监视或者说是计算state变化的
7. 后记
- 下个课件在来聊聊 多个 store的具体用法,其实类似vuex中的多个
module- 一个store如何访问另外一个store
