pinia 核心模块-----action

目录

一、概念

二、actions使用

1、基本使用

2、页面中使用

3、actions里存调用异步方法

---

一、概念

前面我们提到的state和getters属性都主要是数据层面的，并没有具体的业务逻辑代码，它们两个就和我们组件代码中的data数据和computed计算属性一样。那么，如果我们有业务代码的话，最好就是写在actions属性里面，该属性就和我们组件代码中的methods相似，用来放置一些处理业务逻辑的方法。actions属性值同样是一个对象，该对象里面也是存储的各种各样的方法，包括同步方法和异步方法

二、actions使用

1、基本使用

   * 当前模块的相关方法在actions里面定义
   * 存放当前模块相关的业务逻辑函数

// 引入defineStore 方法
import { defineStore } from "pinia";

/**
 * pinia中使用defineStore定义store
 * 第一个参数是应用程序中 store 的唯一 id
 * 第二个参数是是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
 *
 * 返回一个函数使用use+模块名命名
 */
export const useUserStore = defineStore("user", {
  // 其它配置项

  /**
   * 定义当前的模块的state
   * state是一个函数，必须有返回值
   * 返回值就是这个模块的状态
   * @returns
   */
  state() {
    // 返回age为1
    return {
      /**
       * 年龄
       */
      age: 1,
      name: "张三"
    };
  },

  /**
   * 当前模块的相关方法在actions里面定义
   * 存放当前模块相关的业务逻辑函数
   */
  actions: {
    /**
     * 与 getters 一样，操作可以通过 this 访问当前实例
     * 与它们不同，actions 可以是异步的，
     * 您可以在其中await 任何 API 调用甚至其他操作
     * 
     * name 为页面上传古以来的参数
     */
    saveName (name: string) {
      this.name = name
    }
  }

});

2、页面中使用

<template>
  <div>
    <!-- 页面上可以直接使用 -->
    你好，我是pinia--{{userStore.name}}
    <button @click="updateName">修改名字</button>
  </div>
</template>
<script setup lang="ts">
// 引入定义的userStore模块
import { storeToRefs } from "pinia";
import { useUserStore } from "./store/user";

// 使用userStore 并返回定义模块的实例
const userStore = useUserStore();


const updateName = () => {
  // 可以直接使用userStore方法actions里面定义的方法，并调用传参
  userStore.saveName("王五");
};
</script>

3、actions里存调用异步方法

 与 getters 一样，操作可以通过 this 访问当前实例

 与它们不同，actions 可以是异步的，

 您可以在其中await 任何 API 调用甚至其他操作

 

// 引入defineStore 方法
import { defineStore } from "pinia";


const dely = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve()
    }, 1000)
  })
}


/**
 * pinia中使用defineStore定义store
 * 第一个参数是应用程序中 store 的唯一 id
 * 第二个参数是是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
 *
 * 返回一个函数使用use+模块名命名
 */
export const useUserStore = defineStore("user", {
  // 其它配置项


  /**
   * 定义当前的模块的state
   * state是一个函数，必须有返回值
   * 返回值就是这个模块的状态
   * @returns
   */
  state() {
    // 返回age为1
    return {
      /**
       * 年龄
       */
      age: 1,
      name: "张三"
    };
  },

  /**
   * 当前模块的相关方法在actions里面定义
   * 存放当前模块相关的业务逻辑函数
   */
  actions: {
    /**
     * 与 getters 一样，操作可以通过 this 访问当前实例
     * 与它们不同，actions 可以是异步的，
     * 您可以在其中await 任何 API 调用甚至其他操作
     * 
     * name 为页面上传古以来的参数
     */
    async saveName (name: string) {
      // 延迟一秒更新
      await dely()
      this.name = name
    }
  }


});