笔记

如果有一天，你对 Pinia 中的数据不满意，可以追加一些配置项。例如: getters

源码

store\count.ts

import {defineStore} from 'pinia'

//因为当前演示项目中，有一个 count组件，所以当前文件名也起名为 count.ts

//官方推荐我们使用 Hooks 命名思想: use***Store, 表示 使用和...有关的store
//useCountStore() 是一个 Store 定义函数（工厂函数）
//此处∈ 选项式语法（Options API）
//  第0个参数：store 名称（字符串）
//  第1个参数：选项对象
export const useCountStore = defineStore('count',{ //配置对象

  //增加 actions , 里面放置的是一个一个的方法，用于响应组件中的动作。
  actions:{
    increment(value: number){
      console.log('increment被调用了,value=',value)

      //修改数据:
      //console.log(this.sum) //this是当前的store,即 useCountStore
      this.sum += value
    }
  },

  //state 必须写为一个函数,并返回一个对象。
  // 真正存储数据的地方
  state(){
    return {
      sum:6,

      school: 'softool',
      address: '中国'
    }
  },


  getters:{
    //将 state 中 sum属性 放大10倍
    /*bigSum(state){
      return state.sum * 10
    },
    */
    //简写:
    bigSum:state => state.sum *10,


    //转为大写
    //upperSchool(state){
      upperSchool():string{
      //return state.school.toUpperCase()
      console.log('@@@, this=',this) //通过观察可以发现 this 就是 当前store
      //如果想用 this, 就不能像上面 bigSum 一样写为箭头函数，必须在此处写为普通函数。
      return this.school.toUpperCase()

    }
  }
})

components\Count.vue

<template>
  <div class="count">

    <!--
    <h2>当前求和为：{{ countStore.sum }}</h2>
    <h3>欢迎来到: {{ countStore.school }}, 坐落于: {{ countStore.address }}</h3>
    -->
    <!-- 为了简化, 把 sum/school/address 拿出来-->
    <h2>当前求和为：{{ sum }}, 放大10倍后: {{ bigSum }}</h2>
    <h3>欢迎来到: {{ school }}, 坐落于: {{ address }} , 大写:{{ upperSchool }}</h3>

    <!-- 将从 select 收集到内容 转为数字(.number) 给 n -->
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
  import { ref } from "vue";
  import { storeToRefs } from "pinia";

  //使用Pinia的步骤:
  //  第0步 引入自定义的 useCountStore()方法
  import {useCountStore} from '@/store/count'

  //使用 useCountStore(), 实例化得到一个专门保存 count 相关的 store
  const countStore = useCountStore()
  //storeToRefs() 是对 store 中的数据进行 ref包裹, 不处理 store 中的方法。
  const {sum, school, address, bigSum, upperSchool} = storeToRefs(countStore) 

  //console.log('@@@,countStore=', countStore) //经测试此时的实例 countStore 是一个 Proxy 定义的响应式对象。

  // 数据
  let n = ref(1)   // 用户选择的数字

  // 方法
  function add(){
    countStore.increment(n.value)
  }
  function minus(){
    countStore.sum -= n.value
  }
</script>

<style scoped>
  .count {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }

  select,button {
    margin: 0 5px; /*上下为0px 左右间距5px*/
    height: 25px;
  }
</style>