Pinia学习笔记之--核心概念Actions

原创

已于 2022-06-01 08:40:27 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vue #前端 #javascript

于 2022-04-13 18:34:22 首次发布

Pinia 中的 actions 用于组件中的方法，处理业务逻辑，支持异步操作。例如，定义一个 counter store，包含 increment 和 randomizeCounter 方法。actions 可以访问整个 store 实例，通过 this 访问状态，并能 await 异步调用。如示例所示，actions 可以在组件内直接调用，也可以订阅其执行情况以便跟踪和处理错误。此外，可以使用 mapActions 辅助函数在 Options API 中映射 actions 到组件方法。

Actions

Actions相当于组件中的方法。他们可以被定义在defineStore()的actions属性下，它们非常适合定义业务逻辑。

export const useStore = defineStore('main', {
   
   
  state: () => ({
   
   
    counter: 0,
  }),
  actions: {
   
   
    increment() {
   
   
      this.counter++
    },
    randomizeCounter() {
   
   
      this.counter = Math.round(100 * Math.random())
    },
  },
})

与getter一样，actions通过this(和自动完成✨)支持来访问整个store实例。与它们不同的是，actions可以是异步的，您可以在其中await任何API调用或甚至其他操作!下面是一个使用Mande的例子。注意，你只需要得到一个Promise，至于使用的库并不重要，你甚至可以使用原生的fetch函数(仅适用于浏览器):

import {
   
    mande } from 'mande'

const api = mande('/api/users')

export const useUsers = defineStore('users', {
   
   
    state: () => ({
   
   
        userDate: null
    }),
    actions: {
   
   
        async registerUser(login, password) {
   
   
            try {
   
   
                this.userDate = await api.post({
   
    login, password}