Pinia Actions

# 同步

直接调用即可

在index.ts

import { defineStore } from 'pinia'
import { Names } from './store-naspace'
export const useTestStore = defineStore(Names.TEST, {
    state: () => ({
        counter: 0,
    }),
    actions: {
        increment() {
            this.counter++
        },
        randomizeCounter() {
            this.counter = Math.round(100 * Math.random())
        },
    },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在App.vue

<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {{Test.counter}}
          </div>    
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
     Test.randomizeCounter()
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 异步

结合async await 修饰

在index.ts

import { defineStore } from 'pinia'
import { Names } from './store-naspace'
// 定义类型
type Result = {
    name: string
    isChu: boolean
}
// 返回Promise，接收一个泛型
const Login = (): Promise<Result> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                name: '小满',
                isChu: true
            })
        }, 3000)
    })
}
 
export const useTestStore = defineStore(Names.TEST, {
    state: () => ({
        user: <Result>{},
        name: "123"
    }),
    actions: {
        async getLoginInfo() {
            const result = await Login()
            this.user = result;
        }
    },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在App.vue

<template>
     <div>
         <button @click="Add">test</button>
          <div>
             {{Test.user}}
          </div>    
     </div>
</template>
 
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
     Test.getLoginInfo()
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 多个action互相调用

state: () => ({
    user: <Result>{},
    name: "default"
}),
actions: {
	async getLoginInfo() {
		const result = await Login()
		this.user = result;
		this.setName(result.name)
	},
	setName (name:string) {
		this.name = name;
	}
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14

上次更新: 2024/08/14, 04:14:33

← Pinia 解构store Pinia Getters→