pinia 核心模块-----action
目录
[TOC]
一、概念
前面我们提到的state和getters属性都主要是数据层面的，并没有具体的业务逻辑代码，它们两个就和我们组件代码中的data数据和computed计算属性一样。那么，如果我们有业务代码的话，最好就是写在actions属性里面，该属性就和我们组件代码中的methods相似，用来放置一些处理业务逻辑的方法。actions属性值同样是一个对象，该对象里面也是存储的各种各样的方法，包括同步方法和异步方法
二、actions使用
1、基本使用
*** 当前模块的相关方法在actions里面定义
- 存放当前模块相关的业务逻辑函数**
// 引入defineStore 方法
import { defineStore } from "pinia";
/**
* pinia中使用defineStore定义store
* 第一个参数是应用程序中 store 的唯一 id
* 第二个参数是是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
*
* 返回一个函数使用use+模块名命名
*/
export const useUserStore = defineStore("user", {
// 其它配置项
/**
* 定义当前的模块的state
* state是一个函数，必须有返回值
* 返回值就是这个模块的状态
* @returns
*/
state() {
// 返回age为1
return {
/**
* 年龄
*/
age: 1,
name: "张三"
};
},
/**
* 当前模块的相关方法在actions里面定义
* 存放当前模块相关的业务逻辑函数
*/
actions: {
/**
* 与 getters 一样，操作可以通过 this 访问当前实例
* 与它们不同，actions 可以是异步的，
* 您可以在其中await 任何 API 调用甚至其他操作
*
* name 为页面上传古以来的参数
*/
saveName (name: string) {
this.name = name
}
}
});
2、页面中使用
<template>
<div>
<!-- 页面上可以直接使用 -->
你好，我是pinia--{{userStore.name}}
<button @click="updateName">修改名字</button>
</div>
</template>
<script setup lang="ts">
// 引入定义的userStore模块
import { storeToRefs } from "pinia";
import { useUserStore } from "./store/user";
// 使用userStore 并返回定义模块的实例
const userStore = useUserStore();
const updateName = () => {
// 可以直接使用userStore方法actions里面定义的方法，并调用传参
userStore.saveName("王五");
};
</script>
3、actions里存调用异步方法
与 getters 一样，操作可以通过 this 访问当前实例
与它们不同，actions 可以是异步的，
您可以在其中await 任何 API 调用甚至其他操作
// 引入defineStore 方法
import { defineStore } from "pinia";
const dely = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, 1000)
})
}
/**
* pinia中使用defineStore定义store
* 第一个参数是应用程序中 store 的唯一 id
* 第二个参数是是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
*
* 返回一个函数使用use+模块名命名
*/
export const useUserStore = defineStore("user", {
// 其它配置项
/**
* 定义当前的模块的state
* state是一个函数，必须有返回值
* 返回值就是这个模块的状态
* @returns
*/
state() {
// 返回age为1
return {
/**
* 年龄
*/
age: 1,
name: "张三"
};
},
/**
* 当前模块的相关方法在actions里面定义
* 存放当前模块相关的业务逻辑函数
*/
actions: {
/**
* 与 getters 一样，操作可以通过 this 访问当前实例
* 与它们不同，actions 可以是异步的，
* 您可以在其中await 任何 API 调用甚至其他操作
*
* name 为页面上传古以来的参数
*/
async saveName (name: string) {
// 延迟一秒更新
await dely()
this.name = name
}
}
});
