vue3中pinia的使用：state和actions

最新推荐文章于 2024-09-10 16:44:49 发布

原创最新推荐文章于 2024-09-10 16:44:49 发布 · 608 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue项目中使用Pinia库创建store，管理state和actions，以及如何通过storeToRefs保持状态的响应性。示例展示了如何导入store，解构actions，监听state变化并执行相应操作。

前言

以下代码和内容的使用都是在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

参考

pinia 官网