前言
以下代码和内容的使用都是在setup中,未使用TS。
<script setup></script>
内容只涉及最基本的 state 和 actions。getters用法和不同store间的调用,请自行了解。
安装和引入
略
创建 store
在项目的src文件夹下,创建stores文件夹,新建 homeStore.js文件(名字不重要)。
import { defineStore } from 'pinia';
export const homeStore = defineStore({
id: 'homeStore',// 项目中 所有store 的唯一 ID。 这里与文件名一致好处是比较方面后期使用。
state: () => ({
version: '1.1.0',
buildDate: '20231011',
}),
getters: {},
actions: {
fetchData() {
// do something
}
}
});
注意
:actions是允许异步
的。可以使用promise或者发起请求。
使用
下面为具体.vue 文件中的使用
<template>
<section>{{ version }}</section>
</template>
<script setup>
import { watch } from 'vue';
import { storeToRefs } from 'pinia';
import { homeStore } from '@/stores/homeStore';
const HomeStore = homeStore();// 引入 这里使用 大写H的 HomeStore作为当前页面中的使用实例。后续的使用都是该实例
const { fetchData } = HomeStore;
const { version, buildDate } = storeToRefs(HomeStore);
console.log('version: ', version);
console.log('buildDate: ', buildDate);
watch(
() => version.value,
(newVersion) => {
// do something
}
);
</script>
<style></style>
说明
- 代码中的
const { fetchData } = HomeStore;
为解构引入了homeStore中的actions。
后续页面中如果要调用 fetchData 这个action 可以直接调用,如同调用函数一般:fetchData ()
。
如果actions 是promise,调用:
fetchData()
.then((res) => {
// do something
})
.catch((err) => {
// do something
});
- storeToRefs 方法是 pinia 提供的api:从 store 中提取state 时保持其响应性。
这样页面在用如代码中version 或者buildDate 时,不仅可以获取到值,也可以对state做赋值操作:
version.value = '1.1.0 (bate)'
赋值之后,所有引用了homeStore 中 version 这个state的地方也会同步变化。
代码后面的watch,也是为了页面监听对应state变化后进行其它操作。
备注
在用使用 const HomeStore = homeStore();
为页面引入store后。
直接解构
引入的是store的actions
storeToRefs
方法引入的是store的 state