Actions&Getters
Actions
Pinia的Actions类似于methods，在Actions中可以写同步和异步函数，可以修改state中的状态，并且函数之间是可以相互去调用的。
同步函数
store/modules/user.js
import { defineStore } from 'pinia'
import { StoreNames } from '../namespaced.d'
import { store } from '../index'
export const useUserStore = defineStore(StoreNames.USER, {
// 定义全局共享状态的一个初始化状态
state: () => ({
username: '张三',
age: 20,
gender: '男',
}),
// actions类似于methods，可以有同步和异步方法，修改state中的状态
actions: {
// 同步方法
setUserName() {
this.username = '李四'
},
}
})
// 方便在 setup() 外部使用 store
// 如果你需要在其他地方使用 store，你需要将原本被传递给应用 的 pinia 实例传递给 useStore() 函数
export function useUserStoreHook() {
return useUserStore(store)
}
App.vue
<template>
<div>
<div>{{ username }}
</div>
<button @click="change">change</button>
</div>
</template>
<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { username } = storeToRefs(userStore)
const change = () => {
userStore.username()
}
</script>
<style lang='scss' scoped></style>
异步函数
actions中的异步函数使用async/await进行修饰的
store/modules/user.js
import { defineStore } from 'pinia'
import { StoreNames } from '../namespaced.d'
import { store } from '../index'
// 用户信息的接口类型
interface User {
username: string
age: number
gender: string
}
// 请求返回的数据
let userInfo: User = {
username: '张三',
age: 18,
gender: '男'
}
// 模拟登录请求
function login(): Promise<User> {
return new Promise((resolve) => {
setTimeout(() => {
resolve(userInfo)
}, 2000)
})
}
export const useUserStore = defineStore(StoreNames.USER, {
// 定义全局共享状态的一个初始化状态
state: () => ({
user: {} as User
}),
// actions类似于methods，可以有同步和异步方法，修改state中的状态
actions: {
// 异步方法，登录并修改user用户信息
async setUser() {
this.user = await login()
}
}
})
// 方便在 setup() 外部使用 store
// 如果你需要在其他地方使用 store，你需要将原本被传递给应用 的 pinia 实例传递给 useStore() 函数
export function useUserStoreHook() {
return useUserStore(store)
}
App.vue
<template>
<div>
<div>{{ user }}
</div>
<button @click="change">change</button>
</div>
</template>
<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { user } = storeToRefs(userStore)
const change = () => {
userStore.setUser()
}
</script>
<style lang='scss' scoped></style>
互相调用
store/modules/user.js
import { defineStore } from 'pinia'
import { StoreNames } from '../namespaced.d'
import { store } from '../index'
// 用户信息的接口类型
interface User {
username: string
age: number
gender: string
}
// 请求返回的数据
let userInfo: User = {
username: '张三',
age: 18,
gender: '男'
}
// 模拟登录请求
function login(): Promise<User> {
return new Promise((resolve) => {
setTimeout(() => {
resolve(userInfo)
}, 2000)
})
}
export const useUserStore = defineStore(StoreNames.USER, {
// 定义全局共享状态的一个初始化状态
state: () => ({
like: '',
user: {} as User
}),
// getters类似于computed计算属性，也具有缓存作用，用来修饰一些需要通过逻辑计算的值
getters: {},
// actions类似于methods，可以有同步和异步方法，也可以修改state中的状态
actions: {
setUserName() {
this.like = 'jk'
},
// 异步方法，登录并修改user用户信息
async setUser() {
this.user = await login()
// 调用setUserName
this.setUserName()
}
}
})
// 方便在 setup() 外部使用 store
// 如果你需要在其他地方使用 store，你需要将原本被传递给应用 的 pinia 实例传递给 useStore() 函数
export function useUserStoreHook() {
return useUserStore(store)
}
App.vue
<template>
<div>
<div>{{ user }}</div>
<div>{{ like }}</div>
<button @click="change">change</button>
</div>
</template>
<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { user, like } = storeToRefs(userStore)
const change = () => {
userStore.setUser()
}
</script>
<style lang='scss' scoped></style>
Getters
getters类似于computed计算属性，，也具有缓存作用，用来修饰一些需要通过逻辑计算的值，getters之间也可以相互使用。
两种使用方式:
getters: {
newLike: state => `${state.like}-嗨丝`
}
或：
getters: {
newLike () {
return `${this.like}-嗨丝`
}
}
store/modules/user.js
import { defineStore } from 'pinia'
import { StoreNames } from '../namespaced.d'
import { store } from '../index'
export const useUserStore = defineStore(StoreNames.USER, {
// 定义全局共享状态的一个初始化状态
state: () => ({
like: 'jk'
}),
// getters类似于computed计算属性，也具有缓存作用，用来修饰一些需要通过逻辑计算的值
getters: {
newLike: state => `${state.like}-嗨丝`
}
})
// 方便在 setup() 外部使用 store
// 如果你需要在其他地方使用 store，你需要将原本被传递给应用 的 pinia 实例传递给 useStore() 函数
export function useUserStoreHook() {
return useUserStore(store)
}
App.vue
<template>
<div>
<div>{{ like }}</div>
<div>{{ newLike }}</div>
</div>
</template>
<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { like, newLike } = storeToRefs(userStore)
</script>
<style lang='scss' scoped></style>
互相使用
store/modules/user.js
import { defineStore } from 'pinia'
import { StoreNames } from '../namespaced.d'
import { store } from '../index'
export const useUserStore = defineStore(StoreNames.USER, {
// 定义全局共享状态的一个初始化状态
state: () => ({
like: ''
}),
// getters类似于computed计算属性，也具有缓存作用，用来修饰一些需要通过逻辑计算的值
getters: {
newLike(): string {
return `${this.like}-'嗨丝'-${this.likeType}`
},
likeType: () => '红底高跟鞋'
},
})
// 方便在 setup() 外部使用 store
// 如果你需要在其他地方使用 store，你需要将原本被传递给应用 的 pinia 实例传递给 useStore() 函数
export function useUserStoreHook() {
return useUserStore(store)
}
App.vue
<template>
<div>
<div>{{ like }}</div>
<div>{{ newLike }}</div>
<div>{{ likeType }}</div>
</div>
</template>
<script setup lang='ts'>
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { like, newLike, likeType } = storeToRefs(userStore)
</script>
<style lang='scss' scoped></style>
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
