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>