Pinia的同步操作
src/store/index.ts
import { defineStore } from 'pinia';
import { Names } from './store-name';
type User = {
name: string,
age: number
}
const result:User = {
name: '白素贞',
age: 999
}
export const useTestStore = defineStore(Names.Test, {
state:()=>{
return {
user: <User>{}
}
},
getters:{ // 类似computed计算属性 同样有缓存的
},
actions:{ //
setUser(){ // 同步操作 注意此处不要写箭头函数,否则this指向就不对了
this.user = result;
}
}
});
src/store/store-name.ts
export const enum Names {
Test = 'TEST'
}
组件调用
<template>
<div>
<button @click="change">+</button>
<div>
{
{Test.counter}}
</div>
</div>
</template>
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const change = () => {
Test.setUser()
}
</script>
<style></style>
Pinia的异步操作
src/store/index.ts
import { defineStore } from 'pinia'
import { Names } from './store-name'
type Result = {
name: string
age: number
}
const Login = (): Promise<Result> => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
name: '小青',
age: 999
})
}, 3000)
})
}
export const useTestStore = defineStore(Names.TEST, {
state: () => ({
user: <Result>{}
}),
actions: {
async getLoginInfo() { // 异步操作
const result = await Login()
this.user = result;
}
},
})
组件调用
<template>
<div>
actions-user: {
{ Test.user }}
</div>
<hr />
<div>
getters:
</div>
<button @click="change">change</button>
</template>
<script setup lang="ts">
import { useTestStore } from './store';
const Test = useTestStore();
const change = () => {
Test.getLoginInfo();
}
</script>
<style scoped></style>
getters用法
import { defineStore } from 'pinia';
import { Names } from './store-name';
export const useTestStore = defineStore(Names.TEST, {
state:()=>{
return {
name: "小飞机"
}
},
getters:{ // 类似computed计算属性 同样有缓存的
newName():string{
return `$-${this.name}`
}
},
actions:{ //
setUser(){
this.name = '坦克';
}
}
});
使用
<template>
<div>
getters: {
{ Test.newName }}
</div>
<button @click="change">change</button>
</template>
<script setup lang="ts">
import { useTestStore } from './store';
const Test = useTestStore();
const change = () => {
Test.setUser();
}
</script>
<style scoped></style>