vue3:pinia 的 Actions , getters, pinia 实例上的 API

原文：「链接」

vx提问：

1. Actions 基础用法

新建 store/index.ts

store/index.ts


import { defineStore } from "pinia";
type User = {
    name: string,
    age: number
}
let  result:User = {
    name:"xm",
    age:18
}
export const useTestStore = defineStore("TEST", {
    state: () => {
        return {
            current:100,
            user: {},
            name: "xm"
        }
    },
    //computed 修饰一些值
    getters: {
    },
    //methods 可以做同步异步都可以做 提交state
    actions: {
        setCurrent(num: number) {
            this.current = num + this.current
        },
        serUser(){
            this.user = result
        }
    }
})

1.1 定义了变量 result，类型指定为 User

1.2 actions 定义了 serUser 方法，修改 state 内user的 数据

2. 使用

<template>
    <div>
      <h4>vue3:userActios+getters 组合使用</h4>
      <p>actions-user :{{ test.user }}</p>
      <hr>
      <p>actions-name  :{{ test.name }}</p>
      <hr />
      <p>getters:</p>
      <hr>
      <el-button type="primary" @click="change1">change</el-button>
    </div>
  </template>
  <script setup lang="ts">
  import { useTestStore } from "../../store";
  import { storeToRefs } from "pinia";
  let test = useTestStore();






  const change1 = () => {
    test.serUser();
  };
  </script>
  <style scoped lang="less"></style>

2.1 使用的时候调用了 actions 里面的 serUser 函数

3. 异步调用

store/index.ts
import { defineStore } from "pinia";
import { Name } from "./store-name";
type User = {
    name: string,
    age: number
}
let  result:User = {
    name:"xm",
    age:18
}
const Login = ():Promise<User> =>{
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                name:"异步修改",
                age:99
            })
        }, 1000);
    })
}
export const useTestStore = defineStore("TEST", {
    state: () => {
        return {
            current:100,
            user: {},
            name: "xm"
        }
    },
    //computed 修饰一些值
    getters: {
    },
    //methods 可以做同步异步都可以做 提交state
    actions: {
        setCurrent(num: number) {
            this.current = num + this.current
        },
        async serUser(){
            const result = await Login();
            // 修改user数据
            this.user = result;
            // 修改name
            this.setName("伙头智多星")
        },
        setName(name:string){
            this.name = name
        }
    }
})

3.1 Login定义一个异步函数，两秒钟后修改 name ,age 的数据

3.2 serUser 通过 async await 调用 Login，修改 state 内 user 对象的数据 。

修改 name 为 异步修改

修改 age 为 99

3.3 serUser() 里面可以调用 setName ，修改 state 内的name 为 "伙头智多星"

3.4 actions里面定义的函数可以互相调用，不能使用箭头函数，否则无法使用this

4. 使用请看 步骤2 《2. 使用》

5. getters 基础用法

import { defineStore } from "pinia";
import { Name } from "./store-name";
type User = {
    name: string,
    age: number
}
let  result:User = {
    name:"xm",
    age:18
}
const Login = ():Promise<User> =>{
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                name:"异步修改",
                age:99
            })
        }, 1000);
    })
}
export const useTestStore = defineStore("TEST", {
    state: () => {
        return {
            current:100,
            user: <User>{},
            name: "xm"
        }
    },
    //computed 修饰一些值
    getters: {
        // 获取name
        newName():string {
            return `$-${this.name}-${this.getUserAge}`
        },
        // 获取user的age
        getUserAge():number { 
            return this.user.age
        }
    },
    //methods 可以做同步异步都可以做 提交state
    actions: {
        setCurrent(num: number) {
            this.current = num + this.current
        },
        async serUser(){
            const result = await Login();
            // 修改user数据
            this.user = result;
            // 修改name数据
            this.setName("伙头智多星")
        },
        // 修改name数据
        setName(name:string){
            this.name = name
        }
    }
})

5.1 getters 内定义了 newName 和 getUserAge 函数

newName ：返回state内name的数据

getUserAge ： 返回state内 user 的age数据

5.2 getters 里面定义的函数可以互相调用，不能使用箭头函数，否则无法使用this

6. pinia 实例上的 API

// 调用pinia 的 reset 方法,重置 state 的数据为初始值
    test.$reset();
    


//   监听pinia 的数据变化
test.$subscribe((args,state) => {
    console.log("pinia 数据变化了args：",args);
    console.log("pinia 数据变化了state：",state);
});    
    


// 监听 pinia 的action
test.$onAction((args)=>{
    console.log("pinia 的actions执行了:",args);
    // action 方法里面声明的函数执行完成后触发
    args.after(()=>{
        console.log("pinia 的actions执行完成");
    })
    // action 方法里面声明的函数的‘参数’
    args.args
    // action 方法里面声明的函数的‘名称’
    args.name
    // 捕获 action 方法的错误
    args.onError(()=>{
        console.log("捕获 action 方法的错误");
    })
    // pinia 的实例
    args.store
},true) // 监听所有action销毁时，是否取消监听pinia的action


    

原文：「链接」

vx提问：