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
参考资料
Vite
Pinia
轻松搞定+Vue3+Vite+Pinia-1-state
轻松搞定+Vue3+Vite+Pinia-2-state-修改
