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的名称 来访问别的getters
            return (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

任意页面组件

展示

下一篇：

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