Vue3.x集成 Pinia 之 getters

Pinia 中的 getters 和 vuex 中的 getters 的用法是一样的

// useMainStore.js
import { defineStore } from 'pinia'
export const useMainStore = defineStore('main', {
    // state
    state: () => {
        return {
            name:'JunQiu',
            age:20,
            count:10
        }
    },
    // getters
    getters: {
        // 如果要获取当前store中的state属性，需要把state赋给当前属性（在这里不是方法，它是一个属性）
        // 要使用当前属性，当前属性需要把值 return 回去
        doubleCount(state){
            return state.count * 2
        }
    },
})

页面引用

<script setup>
import { storeToRefs } from "pinia";
import { useMainStore } from "./store/useMainStore";

const { name, age, count, doubleCount } = storeToRefs(useMainStore());
</script>
<template>
  <img alt="Vue logo" src="./assets/logo.png" />

  <h1>useMainStore</h1>
  <p> name--age--count--doubleCount</p>
  <span>{{ name }} -- {{ age }} -- {{ count }} -- {{ doubleCount }}</span>
</template>

进阶用法

在上边的列子中，我们可以通过 getters 定义属性达到给 count * 2 的效果，那如果我们需要自定义倍数应该怎么做呢？

搜先我们要明确一点，在 getters 中声明的都是属性，不是方法，所以他是没办法直接接受页面传过来的参数的

如果你如下这样用就错了：

// useMainStore.js
import { defineStore } from 'pinia'
export const useMainStore = defineStore('main', {
    state: () => {
        return {
            name:'JunQiu',
            age:20,
            count:10
        }
    },
    getters: {
        doubleCount(state,num){
            return state.count * num
        }
    },
})

// App.vue
<span>{{ name }} -- {{ age }} -- {{ count }} -- {{ doubleCount(4) }}</span>

我们可以这样用：

// useMainStore.js
import { defineStore } from 'pinia'
export const useMainStore = defineStore('main', {
    state: () => {
        return {
            name:'JunQiu',
            age:20,
            count:10
        }
    },
    getters: {
        doubleCount(state){
            return (num)=>{
                return state.count * num
            }
        }
    },
})

// App.vue
<span>{{ name }} -- {{ age }} -- {{ count }} -- {{ doubleCount(4) }}</span>