29 vue3 Pinia--getters的使用

28 vue3 Pinia修改state的三种方法(直接修改，$patch，actions)_十一月的萧邦-CSDN博客

本篇记录 在vue3中 使用pinia中的getters的使用！

1.新建vue3项目，安装pinia，配置pinia，不教了啊。。。

2.目录，请忽略这个app.js

 user.js  写法和vuex的getters没有什么区别，应该很容易接受

import {defineStore} from "pinia"const userStore = defineStore('userStore', {state: () => ({name: '亚索',qSkill: '斩钢闪'}),getters: {// 箭头函数写法--不接收参数getYasuoInfoNoParams: state => `${state.name}，q技能叫做${state.qSkill}`,// 箭头函数写法--接收参数getYasuoInfoHaveParams: state => {// console.log(this)  //使用箭头函数的话，这个地方的this是无效的 可以通过state.其他getters的名称 来访问别的gettersreturn (params) => `${state.name}，q技能叫做${state.qSkill}，${params}`},// 普通函数写法--不接收参数getYasuoInfoNoParams1(state) {// console.log(this)  //在此处this 和 state的值是一样的  可以通过this/state.其他getters的名称 来访问别的getters// console.log(state)return `${this.name}，q技能叫做${this.qSkill}`},// 普通函数写法--接收参数getYasuoInfoHaveParams1(state) {return function (params) {return `${state.name}，q技能叫做${state.qSkill}，${params}`}}}
})export default userStore

任意页面组件

<template><div>{{ yasuoInfoNoParams }}</div><div>{{ yasuoInfoHaveParams }}</div><div>{{ yasuoInfoNoParams1 }}</div><div>{{ yasuoInfoHaveParams1 }}</div>
</template><script>
import userStore from "@/store/user"
import {computed} from "vue"export default {name: "About",setup() {const store = userStore()const yasuoInfoNoParams = computed(() => store.getYasuoInfoNoParams)const yasuoInfoHaveParams = computed(() => store.getYasuoInfoHaveParams('r技能叫做狂风绝息斩'))const yasuoInfoNoParams1 = computed(() => store.getYasuoInfoNoParams1)const yasuoInfoHaveParams1 = computed(() => store.getYasuoInfoHaveParams1('r技能叫做狂风绝息斩'))return {yasuoInfoNoParams,yasuoInfoHaveParams,yasuoInfoNoParams1,yasuoInfoHaveParams1}}
}
</script>

展示

下一篇：

30 vue3 Pinia对state的订阅监听（$subscribe）_十一月的萧邦-CSDN博客