npm init vite

npm install pinia

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
// 創(chuàng)建pinia實(shí)例
const pinia = createPinia()
// 掛載到根實(shí)例上
createApp(App).use(pinia).mount('#app')

const store = useStore()
store.counter++

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random())
    },
  },
})

// store/index.ts
import { defineStore } from "pinia"

// 1.定義并導(dǎo)出容器
// 參數(shù)1：容器的ID，必須唯一，將來(lái)Pinia會(huì)把所有的容器掛載到根容器，每個(gè)容器的名字就是這里的ID
export const useMainStore = defineStore('main', {
  /**
   * 類似與組件的data， 用來(lái)存儲(chǔ)全局狀態(tài)
   * 1.必須是函數(shù)：這樣是為了在服務(wù)端渲染的時(shí)候避免交叉請(qǐng)求導(dǎo)致的數(shù)據(jù)狀態(tài)污染（客戶端其實(shí)無(wú)所謂）
   * 2.必須是箭頭函數(shù)：為了更好的ts類型推導(dǎo)
   * 返回值：一個(gè)函數(shù)，調(diào)用該函數(shù)即可得到容器實(shí)例
   */
  state: () => {
    return {
      count: 100,
      foo: 'bar',
      arr: [1, 2, 3]
    }
  },
  /**
   * 類似于組件的computed，用來(lái)封裝計(jì)算屬性，有【緩存】功能
   */
  getters: {
    // 每個(gè)函數(shù)接受一個(gè)可選參數(shù)：state狀態(tài)對(duì)象
    // count10(state) {
    //   console.log('count10()調(diào)用了');// 具有緩存功能
    //   return state.count + 10
    // }

    // （不建議）如果不使用state而使用this，此時(shí)就不能對(duì)返回值類型做自動(dòng)推導(dǎo)了，必須手動(dòng)指定
    count10(): number {
      return this.count + 10
    }
  },
  /**
   * 完全類比于Vue2組件中的methods（可以直接用this)，用來(lái)【封裝業(yè)務(wù)邏輯】，修改state
   */
  actions: {
    /**
     * 注意??！不能使用箭頭函數(shù)定義actions?。∫欢ㄒ闷胀ê瘮?shù)！?。?
     * why？因?yàn)榧^函數(shù)綁定了外部this
     */
    changeState(num: number) {
      // 可以直接使用this，像極了Vue2
      // this.count++
      // this.foo = 'hello'
      // this.arr.push(4)

      // 對(duì)于批量修改，建議使用patch做優(yōu)化
      this.$patch((state) => {
        state.count += num
        state.foo = 'hello'
        state.arr.push(4)
      })
    }
  }
})
// 2.容器中的state

// 3.修改state

// 4.actions的使用

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
  <p>{{ mainStore.count }}</p>
  <p>{{ mainStore.foo }}</p>
  <p>{{ mainStore.arr }}</p>
  <p>{{ mainStore.count10 }}</p>
  <p>{{ mainStore.count10 }}</p>
  <p>{{ mainStore.count10 }}</p>
  <hr />
  <p>{{ count }}</p>
  <p>{{ foo }}</p>
  <p>
    <button @click="handleChangeState">修改數(shù)據(jù)</button>
  </p>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useMainStore } from '../store'

// 【哪里使用寫哪里】，此時(shí)要在HelloWorld組件中用，那就寫這里。這很Composition API
const mainStore = useMainStore() 

// 禁止！這樣會(huì)喪失響應(yīng)性，因?yàn)閜inia在底層將state用reactive做了處理
// const { count, foo } = mainStore
// 解決方案：將結(jié)構(gòu)出的數(shù)據(jù)做ref響應(yīng)式代理
const { count, foo } = storeToRefs(mainStore)

const handleChangeState = () => {
  // ==============數(shù)據(jù)修改的幾種方式=============
  // 方式一：直接修改
  // mainStore.count++

  // 方式二：使用 $patch(對(duì)象) 批量修改，建議使用，底層做了性能優(yōu)化
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  //   foo: 'hello',
  //   arr: [...mainStore.arr, 4] // 這就不優(yōu)雅了，所以有了方式三
  // })

  // 方式三：使用 $patch(回調(diào)函數(shù))，這個(gè)更優(yōu)雅，墻裂推薦?。?！
  // 回調(diào)函數(shù)中的state參數(shù)，就是Store定義時(shí)里面的state!
  // mainStore.$patch((state) => {
  //   state.count++
  //   state.foo = 'hello'
  //   state.arr.push(4)
  // })

  // 方式四：邏輯較為復(fù)雜時(shí)，應(yīng)封裝到Store的actions中，并對(duì)外暴露接口
  mainStore.changeState(10)
}
</script>