1.簡介

pinia(vuex5.0)，pinia和vuex的使用方式基本一致，用途也是一樣，都是狀態(tài)管理的工具，但pinia是vuex的升級，使用更加簡潔，學(xué)習(xí)成本也更低

2.pinia和vuex的對比

Vuex 中核心部分： State、Getters、Mutations（同步） 和 Actions（異步）

Pinia 中核心部分： State、Getters 和 Actions(同步異步均支持)

3.pinia各部分的作用

·State： 類似于組件中data，用于存儲全局狀態(tài)

·Getters： 類似于組件中的computed，根據(jù)已有的State封裝派生數(shù)據(jù)，也具有緩存的特性

·Actions： 類似于組件中的methods，用于封裝業(yè)務(wù)邏輯，同步異步均可以

4.pinia+vue3+vite使用方式

(1).創(chuàng)建項(xiàng)目

npm init vite@latest

(2).安裝pinia

npm install pinia -S

(3).將pinia掛載到vue中

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
// 創(chuàng)建 Pinia 實(shí)例
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

(4).在src文件下創(chuàng)建一個store文件夾，并添加index.js

import { defineStore } from 'pinia'
// 1. 定義容器、導(dǎo)出容器
// 參數(shù)1：容器的ID，必須是唯一的，后面Pinia會把所有的容器掛載到根容器
// 參數(shù)2：一些選項(xiàng)對象，也就是state、getter和action
// 返回值：一個函數(shù)，調(diào)用即可得到容器實(shí)例

export const useMainStore =  defineStore('main',{
    // 類似于Vue2組件中的data，用于存儲全局狀態(tài)數(shù)據(jù)，但有兩個要求
    // 1. 必須是函數(shù)，目的是為了在服務(wù)端渲染的時候避免交叉請求導(dǎo)致的數(shù)據(jù)狀態(tài)污染
    state:()=>{
        return {
            info:"pinia",
            count:1
        }
    },
    // 2. 使用容器中的 state
    // 3. 通過 getter 修改 state 
    // 4. 使用容器中的 action 同步和異步請求
    getters: {
    infoCount(state) {
      return 'getters:' + state.info + state.count
    }
  },
  actions: {
    changeState() {
      this.count++
      this.info = "actions修改數(shù)據(jù)"
    },
    changeStates(num) {
      this.count += num + 10
      this.info = "actions修改數(shù)據(jù)"
    }
  }
})

(5).使用

<template>
      <button @click="edit">修改state的值</button>
      <div>
        <p>pinia:{{ mainStore.info }}</p>
        <p>pinia:{{ mainStore.count }}</p>
      //解構(gòu)后：
        <p>pinia:{{ info }}</p>
        <p>pinia:{{ count }}</p>
      </div>
        <h3>pinia getters使用</h3>
        <p>{{ mainStore.infoCount }}</p>
</template>

<script setup>
import { useMainStore } from "../store";
import { storeToRefs } from "pinia";
//---pinia 獲取state的普通使用---
const mainStore = useMainStore();
//---pinia 獲取state的解構(gòu)使用---
const { info, count } = storeToRefs(mains tore)
//修改state的值
//1.普通修改
// function edit() {
//   mainStore.$patch(state => {
//     state.info = '修改過了',
//       state.count++
//   })
// }
//2.使用actions修改
function edit() {
  // mainStore.changeState()
  mainStore.changeStates(10)
}
</script>