🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
>[success] # pinia -- action 1. `Actions` 相当于组件中的[methods](https://v3.vuejs.org/guide/data-methods.html#methods),可以去操作`state` 虽然,不通过`Actions` 也可以直接操作,但可以结合业务将这种公共的配合业务抽离同一去操作`state` 2. 和`getters` 不同点 **`actions`可以是异步的** 3. `Actions` 可以通过`this`访问当前的`store` 对象 >[danger] ##### 案例 * 定义store ~~~ import { defineStore } from "pinia"; // 第一个参数是应用程序中 store 的唯一 id export const useCountStore = defineStore("count", { // 其它配置项 state: () => ({ counter: 0, ls: [1, 12, 31, 48, 5], }), actions: { // 调用时候传进参数和vuex 这点不同,因为其内部可以 // 通过this 直接访问到state addCount(num) { this.counter += num; }, }, }); ~~~ * 视图 ~~~html <template> <div>{{ counter }}</div> <button @click="addCount">addCount</button> <button @click="store.addCount(1)">addCount</button> </template> <script setup> import { useCountStore } from "@/store/modules/count"; import { storeToRefs } from "pinia"; const store = useCountStore(); const { counter } = storeToRefs(store); // 调用方法时候这样解构不生效 // const { addCount } = store; // 在定义一个函数 function addCount() { store.addCount(1); } </script> ~~~