Vue前端开发-pinia之Actions插件

Store中的Actions部分，用于定义操作属性的方法，类似于组件中的methods部分，它与Getters都可以操作State属性，但在定义方法时，Getters是对State属性进行加工处理，再返回使用，属于内部计算;Actions则是根据业务逻辑，操作State或Getters保存的值，方法中可以实现异步请求、调用任意的API，属于逻辑层部分。

一、构建和执行Actions中方法

Actions属于Store中的一部分，因此，可以使用defineStore方法中Actions属性来构建某个业务逻辑，例如：在上一小节10.3.1基础上，构建两个Actions中的方法，一个名称为editCount，用于动态改变count的值，另一个名称为addGrade，用于动态添加grade属性的值，具体实现的代码如下所示：

import { defineStore } from "pinia";
export const schStore = defineStore("sch_id", {state: () => {return {name: "精英学校",count: 1200,grade: ['小学', '初中']}},getters: {},actions: {editCount(val) {this.count = val;},addGrade(val) {this.grade.push(val);}}
})

在上述代码的Actions属性加粗部分中，分别定义了两个方法editCount和addGrade，如果方法中需要传入其他参数，可以直接在方法中定义形参，如val，如果需要访问State中的属性，可以通过this对象直接访问属性名即可，如this.count和this.grade。

Actions属性构建完成后，如果需要在其他组件中调用，通常使用mapActions，将它的操作属性映射成组件methods中的一部分，实现代码如下所示：

<script>
import { mapState, mapActions } from 'pinia'
import { schStore } from "../../store/schStore";
export default {computed: {...mapState(schStore, ["grade", "count"])},methods: {...mapActions(schStore, ["editCount", "addGrade"])},mounted() {this.editCount(5);console.log(this.count);this.addGrade("高中");console.log(this.grade);}
}
</script>

在上述代码的加粗部分中，先通过导入的mapActions函数，将Actions属性映射成组件methods的成员，接下来，先调用editCount方法，由于传入的实参为5，因此，第一次在控制台输出值为5;再调用addGrade方法，传入实参为“高中”，因此，最后一次在控制台输出的内容为“小学”、“初中”、“高中”字样。

二、执行异步请求

Actions属性中还可以定义执行异步请求的方法，由于异步请求时，无法及时同步State属性值，因此，通常将异步请求的方式使用async和await语句改成同步请求，例如：使用异步请求的方式，修改State中的name属性值，代码如下：

import { defineStore } from "pinia";
import axios from "axios";
export const schStore = defineStore("sch_id", {state: () => {return {name: "精英学校",count: 1200,grade: ['小学', '初中']}},getters: {},actions: {async ajaxEditName() {
const res = await axios
.get("http://rttop.cn/api/?day=1-1");this.name = res.data;}}
})

在上述加粗代码中，为了实现异步请求，先导入axios模块，然后在Actions属性中定义一个名称为ajaxEditName的方法，用于发送指定的请求地址，并将请求返回的结果更新name属性值，该方法在组件中调用的代码如下所示：

<script>
import { mapState, mapActions } from 'pinia'
import { schStore } from "../../store/schStore";
export default {computed: {...mapState(schStore, ["name"])},methods: {...mapActions(schStore, ["ajaxEditName"])},async mounted() {console.log(this.name)await this.ajaxEditName();console.log(this.name)}
}
</script>