Vue 3 & Pinia 状态管理（5） - Pinia Actions 的相关使用

嗨，我是温新，一名 PHPer。

本篇目标：了解什么是 Pinia

Pinia 官方文档：https://pinia.web3doc.top/introduction.html

Actions 相当于 methods，使用 defineStore 中的 actions 属性定义。它适合对业务逻辑的处理。

actiosn 使用起来比较容易，下面直接看看代码实现。

步骤一：编写 actions

// src/stores/user.ts

import { defineStore } from 'pinia'
import {ref, computed} from 'vue'

// 组合式 API
export default defineStore('user', () => {
  // 省略了其他代码
    
  // actions
  function getRandomNumber() {
    return Math.floor(Math.random() * 100)
  }

  return {getRandomNumber}
})

步骤二：使用

<!-- src/App.vue -->
<h3>actions 方法： {{  userStore.getRandomNumber() }}</h3>

<script setup lang="ts">
    import { toRefs } from 'vue'
    import useUserStore from './stores/user'

    const userStore = useUserStore()
</script>