[JavaScript知识库]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

任意页面组件

<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>

展示

?