Pinia 是状态管理工具。
前言
Pinia主要有以下特征(图片来自Pinia文档):
简单理解:
- 不存在
mutations
- 对
TS
的类型推断更加明确 - 不需要额外引入,会自动进行注册
- 不再有嵌套的模块结构,扁平化结构,不存在
namespaced
,定义创建是就是一个单独的模块
安装
npm install pinia
引入
代码实现是基于vue3 + ts
--- main.ts ---
import { createPinia } from 'pinia';
app.use(createPinia())
基本结构
defineStore
-- 定义一个store
- 定义的
store
变量名称尽量以useXXX
命名 - 接收两个参数,第一个参数是id,第二个参数是内容
--- store.ts ---
import { defineStore } from 'pinia';
// const useCommon = defineStore(xxx, {});
// defineStore(id:string, component:object | any)
export const useCommon = defineStore('common', {
state:() => ({}),
getters: {},
actions: {},
});
--- template ---
<script lang='ts' setup>
import { useCommon } from '.......'; // 路径
const commonStore = useCommon();
</script>
state
state
是一个函数,为了防止变量间的交叉污染(与vue中data作用相似)state
是箭头函数,为了更好的ts
的类型推断
const useCommon = defineStore('common', {
state: () => ({
msg: 'Hello World',
count: 0,
}),
})
使用state
方法1:引入后直接使用
<template>
<div>{{ commonStore.msg }}</div>
</template>
<script lang='ts' setup>
import { useCommon } from '.......';
const commonStore = useCommon();
</script>
方法2:解构赋值
- 解构赋值会使数据响应的特性消失
- 要使用
storeToRefs
保持
<template>
<div>{{ message }}</div>
</template>
<script lang='ts' setup>
import { useCommon } from '.......';
import { storeToRefs } from 'pinia'; // 引入
const commonStore = useCommon();
const { msg: message } = storeToRefs(commonStore); // 使用
</script>
修改state
方法1:通过actions
修改(此处暂不展开描述)
方法2:直接修改
- $patch
// 写法1
commonStore.$patch({
msg: 'Hello Pinia',
count: 5,
})
// 写法2
commonStore.$patch((state) => {
state.count += 1;
state.msg = 'So Noce'
})
getters
类似于计算属性
- 当以普通函数写法时,一定要添加 return 的类型
- 当以箭头函数写法时,传入 state,才能获取 state 中的值并进行修改
export const useCommon = defineStore('common', {
state: () => ({
count: 0,
count1: 10
}),
getters: {
// 写法1
totalCount():number {
const total = this.count + this.count1;
return total
}
// 写法2
totalCount: (state) => {
return state.count + state.count1
}
}
})
使用getters
<template>
<div>{{ commonStore.totalCount }}</div>
</template>
actions
state的修改
const useCommon = defineStore('common', {
state: () => ({
count: 0,
}),
actions: {
changeCount(n1:number) {
this.count += n1;
},
},
})
使用
// 创建按钮的点击事件为btnChange
const btnChange = () => {
// 调用 useCommon 的 actions 定义的changeCount函数
commonStore.changeCount(1);
}
异步
// 创建按钮的点击事件为btnChange
actions: {
async getNavList() {
const navRes = await getNavListAPI();
this.navList = navRes.data.data;
},
},
调用其他的store中的actions方法
export const useCommon = defineStore('common', {
state: () => ({
count: 0,
}),
actions: {
changeCount() {
// 获取另一个store对象
const deviceStore = useDevice();
// 调用另一个store对象的action中的函数
this.count = deviceStore.changeCount();
},
},
})
export const useDevice = defineStore('device', {
state: () => ({
devcieCount: 2,
}),
actions: {
changeCount() {
this.devcieCount += 2;
return this.devcieCount
},
},
})
结语
以上均为根据文档进行一个简单初步的理解,如有错误欢迎各位大佬指出,谢谢