vue3 + vite + ts + setup , 第十五练 vue3 中使用pinia (二) 如何使用getters、actions、 $reset、$subscribe、$onAction

getters

1、使用箭头函数不能使用this this指向已经改变指向undefined 修改值请用state

  // computed 修饰一些值
  getters: {
  
    // 箭头函数不能直接使用this this指向已经改变指向undefined,需要使用state
    getTestUse: (state): string => {

      return `$-箭头函数获取-${state.user.name}`
    }

  },

2、普通函数使用 可以使用this

  // computed 修饰一些值
  getters: {
    getUserName(): string {
      return `$--${this.user.name}`
    },
    getUsernameage(): string {

      return `我是${this.getUserName}，我已经${this.user.age}岁`
    }
  },

3、getters互相调用

 getters: {
    getUserName(): string {
      return `$--${this.user.name}`
    },
    getUsernameage(): string {

      return `我是${this.getUserName}，我已经${this.user.age}岁`
    }
  },

actions

actions支持同步异步使用

1、同步使用：

  // methods 可以做同步 异步都可以  提交state
  actions: {
    setUse() {
      this.user = result
    },
    setNametxt(name: string) {
      this.user.name = `我是${name}`
    }

  }

<template>
  <div>
    <h2>getters: {{ userStore.getUserName }}</h2>
    <h2>getters: {{ userStore.getUsernameage }}</h2>
    <h2>getters:{{ userStore.getTestUse }}</h2>

  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useUserStore } from '../../Store/user'
// 使用pinia
const userStore = useUserStore()

// actions 同步操作
let changeState = () => {
  userStore.setUse()
}

</script>

<style scoped>
</style>

2、异步使用：可以结合async await 修饰

import { defineStore } from 'pinia'
import { Names } from "./Name"



type User = {
  name: string,
  age: number
}
let result: User = {
  name: "大飞机",
  age: 666
}

const Login = (): Promise<User> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(result)
    }, 3000)
  })
}

export const useUserStore = defineStore(Names.User, {
  state: () => {
    return {
      user: <User>{},
      age: 18
    }
  },
  getters: {
    getUserName(): string {
      return `$--${this.user.name}`
    }
  },
  actions: {
    async setUserPromise() {
      let res = await Login()
      this.user = res
    }
  }
})

// actions 异步操作
let changeState2 = () => {
  userStore.setUserPromise()
}

3、多个actions互相调用

import { defineStore } from 'pinia'
import { Names } from "./Name"



type User = {
  name: string,
  age: number
}
let result: User = {
  name: "大飞机",
  age: 666
}

const Login = (): Promise<User> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(result)
    }, 3000)
  })
}


export const useUserStore = defineStore(Names.User, {
  state: () => {
    return {
      user: <User>{},
      age: 18
    }
  },
  getters: {
    getUserName(): string {
      return `$--${this.user.name}`
    }
  },
  actions: {
    async setUserPromise() {
      let res = await Login()
      this.user = res
      this.setNametxt(res.name)
    },
    setNametxt(name: string) {
      this.user.name = `我是${name}`
    }
  }
})

常用的api的使用：$reset()、$subscribe((args,state)=>{})、$onAction((args)=>{})

1、$reset()  重置store到他的初始状态

//改变age的值 
let changeState = () => {
  userStore.age ++ 
}
//重置store的state
let resetStore = () => {
  userStore.$reset()
}

比如我们把state的age、name等的值改变后，使用userStore.$reset()会把state的所有值重置到初始状态

2、订阅state的改变，$subscribe((args,state)=>{})

类似于Vuex 的abscribe  只要有state 的变化就会走这个函数

userStore.$subscribe((args, state) => {
  console.log(args, state)

}, {
  detached: true// 组件销毁继续监听
})

第二个参数

如果你的组件卸载之后还想继续调用请设置第二个参数 detached：true

 3、订阅Actions的调用，$onAction((args)=>{})

只要调用actions就会触发该监听函数

userStore.$onAction((args) => {
  console.log("onactions", args)
}, true)

第二个参数也是组件卸载后继续监听