>[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> ~~~