首页 前端知识 Vue3 使用Pinia中的Actions、getters

Vue3 使用Pinia中的Actions、getters

2024-06-06 10:06:34 前端知识 前端哥 978 201 我要收藏

Actions(支持同步异步)
1.同步 直接调用
2.异步 可以结合async await 修饰

import { defineStore } from 'pinia'

type User = {
    name:string,
    age: number
}

let user:User = {
    name: '小黑',
    age: 18
}


export const useStore = defineStore('main', {
    state:()=> {
        return {
            data: <User>{},
            age: 18
        }
    },
    getters: {
        setName():string {
            return `---${this.age}----${this.setAge}`
        },
        setAge():number {
            return this.data.age
        }
    },
    // actions 可以同步和异步
    actions: {
        setUser() {
            this.data = user
        }
    }
})

<template>
  <div>
    {{ user.data }}
    {{user.age}}
    {{user.setName}}
    <button @click="change">改变值</button>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "./store"

const user = useStore();

const change = () => {
  user.setUser()
}

</script>

<style scoped></style>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11081.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!