Action

Action 介绍

Action 相当于组件中的 method。它们可以通过 defineStore() 中的 actions 属性来定义。

定义演示

import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter',{
  state : ()=>{
    return {
      count : 0
    }
  },
  getters : {
    doubleCount : (state)=>{
      return state.count +  2;
    }
  },
  actions : {
    // 类似 getter，action 也可通过 this 访问整个 store 实例，
    // 不同的是，action 可以是异步的，你可以在它们里面 await 调用任何 API，以及其他 action！
    randomizeCounter : function(){
      this.count = Math.round(100 * Math.random())
    }
  }
})

调用演示

<script setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '/src/store/store'
const store = useCounterStore()
const { count } = storeToRefs(store)
const add = function(){
  console.log(count.value);
  store.count++;
}
</script>
<template>
  <div>
    <div>数值 : {{ count }}</div>
    <div>数值 : {{ store.doubleCount }}</div>
    <div>
      <button @click="add">+ 1</button>
      <button @click="store.randomizeCounter()">随机</button>
    </div>
  </div>
</template>
<style scoped>
</style>