源码

src\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: '中国'
    }
  }

})

src\store\loveTalk.ts

import {defineStore} from 'pinia'

import axios from "axios";
import {nanoid} from 'nanoid'

export const useTalkStore = defineStore('talk',{

  //
  actions:{
    //用了 await, 补上 async 英 [ə'zɪŋk]美 [ə'zɪŋk]
    async getATalk() {
      let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
      // 把请求回来的字符串，包装成一个对象
      let obj = {id:nanoid(), title} 
      // 放到数组中
      this.talkList.unshift(obj)
    }

  },

  // 真正存储数据的地方
  state(){
    return {
      talkList:[
        {id:'ftrfasdf01',title:'今天你有点怪，哪里怪？怪好看的！'},
        {id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓，今天想我了没？'},
        {id:'ftrfasdf03',title:'心里给你留了一块地，我的死心塌地'}
      ]
    }
  }
})

src\components\Count.vue

<template>
  <div class="count">

    <!--
    <h2>当前求和为：{{ countStore.sum }}</h2>
    <h3>欢迎来到: {{ countStore.school }}, 坐落于: {{ countStore.address }}</h3>
    -->
    <!-- 为了简化, 把 sum/school/address 拿出来-->
    <h2>当前求和为：{{ sum }}</h2>
    <h3>欢迎来到: {{ school }}, 坐落于: {{ address }}</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} = 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>

src\components\LoveTalk.vue

<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>

    <ul>
      <!--li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li-->

      <!--
      <li v-for="talk in talkStore.$state.talkList" :key="talk.id">{{talk.title}}</li>
       或者写为 -->
      <li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li>

    </ul>
  </div>
</template>

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

  import {useTalkStore} from '@/store/loveTalk'
  const talkStore = useTalkStore()
  //拿出其中的 talkList
  const {talkList} = storeToRefs(talkStore)

  // 方法
  function getLoveTalk(){
    talkStore.getATalk()
  }
</script>

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