Vue3：Pinia中的getters

一、情景说明

Pinia中的getters的作用类似于Vue中的计算属性computed

二、案例

1、配置getters
count.ts

import {defineStore} from 'pinia'

export const useCountStore = defineStore('count',{
  // actions里面放置的是一个一个的方法，用于响应组件中的“动作”
  actions:{
    increment(value){
      console.log('increment被调用了',value)
      if( this.sum < 10){
        // 修改数据（this是当前的store）
        this.sum += value
        this.school='前段-Vue3'
        this.address='中国-北京'
      }
    }
  },
  // 真正存储数据的地方
  state(){
    return {
      sum:6,
      school:'Vue3',
      address:'中国'
    }
  },
  getters:{
    bigSum:state => state.sum * 10,
    upperSchool():string{
      return this.school.toUpperCase()
    }
  }
})

2、使用getters中的变量
结构赋值，取出变量即可使用

  const {sum,school,address,bigSum,upperSchool} = storeToRefs(countStore)