笔记

Pinia 强调的是 分类。

store 目录就是 Pinia 的一个体现，可以理解为： store 是 Pinia 世界的一个总经理。

源码

main.ts

import {createApp} from 'vue'
import App from './App.vue'

// 第一步：引入pinia
import {createPinia} from 'pinia'

const app = createApp(App)
// 第二步：创建pinia
const pinia = createPinia()
// 第三步：安装pinia
app.use(pinia)

app.mount('#app')

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',{ //配置对象

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

store\loveTalk.ts

import {defineStore} from 'pinia'

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

components\Count.vue

<template>
  <div class="count">

    <!--h2>当前求和为：{{ sum }}</h2-->
    <h2>当前求和为：{{ countStore.sum }}</h2>

    <!-- 将从 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";

  //使用Pinia的步骤:
  //  第0步 引入自定义的 useCountStore()方法
  import {useCountStore} from '@/store/count'
  //  第1步 创建 useCountStore() 的实例为 countStore
  const countStore = useCountStore()
  console.log('@@@,countStore=', countStore) //经测试此时的实例 countStore 是一个 Proxy 定义的响应式对象。
  // 以下两种方式都可以拿到state中的数据
  // console.log('@@@',countStore.sum)
  // console.log('@@@',countStore.$state.sum)

  // 数据

  //let sum = ref(1) // 当前求和
  let n = ref(1)   // 用户选择的数字

  // 方法
  function add(){
    //sum.value += n.value
  }
  function minus(){
    //sum.value -= 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>

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 talkStore.talkList" :key="talk.id">{{talk.title}}</li>

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

<script setup lang="ts" name="LoveTalk">

  import {reactive} from 'vue'
  import axios from "axios";
  import {nanoid} from 'nanoid' //如果提示没有 nanoid, 需要安装: npm i nanoid

  // 数据
  //定义一个响应式的数组
  /*let talkList = reactive([
    {id:'ftrfasdf01',title:'今天你有点怪，哪里怪？怪好看的！'},
    {id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓，今天想我了没？'},
    {id:'ftrfasdf03',title:'心里给你留了一块地，我的死心塌地'}
  ])*/
  import {useTalkStore} from '@/store/loveTalk'
  const talkStore = useTalkStore()

  // 方法
  async function getLoveTalk(){
    // 发请求
    //写法0:
    //let strRelsult = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    //console.log(strRelsult.data.content)
    //写法1:
    //对返回的对象 直接 解构 取 data 的写法。
    //let {data} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    //那么此时取 data.content 的 内容就是:
    //console.log(data.content)
    //写法2:
    //对返回的对象 解构(取data) 再解构(从data中再取content) ：
    //let {data:{content}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    //console.log(content)
    //写法3: 连续解构赋值+重命名
    //对返回的对象 解构(取data) 再解构(从data中再取content) 最后将 content改个名为title：
    /*let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    console.log(title)
    //注: 2025-11-30 访问该链接的时候提示 LoveTalk.vue?t=1764492536486:19 GET https://api.uomg.com/api/rand.qinghua?format=json net::ERR_CERT_DATE_INVALID


    // 把请求回来的字符串，包装成一个对象
    let obj = {id:nanoid(), title} 
    // 放到数组中
    talkList.unshift(obj)*/
  }
</script>

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