1. 前言
Vue3大势不可阻挡,与之而来的就是Vite ,尤雨溪极力推荐的前端开发与构建工具vue3原生支持TS ,所以TS语法和vue3TS语法学起来vue中的vuex状态管理也用不顺手,看不顺眼了,换为Pinia- 文接上篇 Vue3+Pinia-3-getters
- 之前一套流程
pinia共享state,访问,修改算是基础的使用了,接下里说下不太常用的东西
2. 新建一个store
- 新建 src/store/carStore.ts,模拟
多个store的场景- 操作都一样,直接上代码
import {defineStore} from 'pinia'
export const carStore = defineStore('carStoreId',{
// 这种写法 有道友反馈看起来 还是需要反应下 😓😓
// state:()=>({})
state:()=>{
return{
carList:['唐-DMI','汉EV-千山翠','海豹','领跑C01']
}
}
})
3. 组件 使用 carStore
- 没有套路,就直接使用
- src/components/HelloCar.vue
- 在App.vue中引入组件显示 看效果
<template>
<div>
<h1> 多个store</h1>
<h1>{{ store.carList }}</h1>
<hr>
<h1>{{carList}}</h1>
</div>
</template>
<script setup lang="ts">
import { carStore } from '../store/carStore'
import { storeToRefs } from 'pinia'
let store = carStore()
let { carList} = storeToRefs(store)
</script>
<style scoped>
</style>
- 效果图
1.png- 组合式API,像组装积木一样,功能分割,需要啥组到一起就行
- 调试多个store
调试.png
4. store互相调用
4.1 场景分析
- 一个store想使用另外一个store内的数据咋办呢
- 拿上述的这个
carStore和helloStore为例- 需求:
helloStore使用carStore里面的数据carList
4.2 helloStore配置
- 整体思路是 在
actions中定义函数,函数中访问其他store数据- 引入 import {carStore} from './carStore'
- actions 配置 函数/getCarList
- 函数内部用carStore()访问
carStore自己的数据
import {carStore} from './carStore'
export const helloStore = defineStore("hello", {
// 必须用箭头函数
state: () => ({
name:'温言铁语',
age: 71,
phone:"18603038753",//手机号中间四位 *代替 脱敏处理
}),
actions:{
updateState(){
this.age ++
this.name = 'yzs'
},
getCarList(){
console.log("-------carStore",carStore().carList);
}
},
getters:{
starPhone(state){
console.log("缓存---值一样不会被多次调用");
return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/ ,'$1****$2')
}
}
});
5. 组件内使用
- 添加一个获取按钮
<hr>
<button @click=" getList">获取carStore数据 </button>
- 事件实现逻辑
const store = helloStore()
const getList = ()=>{
store.getCarList()
// 可以赋值给当前界面的数据
}
- 查看控制台打印,证明调用并获取到了 carStore的数据
6. 后记
- 推荐下载插件的地址
- Volar比vetur更强大的 vscode插件,提供了更好的vue3语法支持
- 全名Vue Language Features (Volar) 骷髅头/☠️,向着 one piece出发吧
参考资料
Vite
Pinia
轻松搞定 Vue3+Vite+Pinia-1-state
轻松搞定 Vue3+Vite+Pinia-2-state-修改
轻松搞定 Vue3+Vite+Pinia-3-getters
