---

前言

????隨著Vue.js項目的日益復雜，高效的狀態管理變得至關重要。Pinia作為Vue.js官方推薦的新一代狀態管理庫，以其簡潔的API和強大的功能脫穎而出。本文將帶您快速上手Pinia，從安裝到應用，輕松實現Vue.js項目的全局狀態管理，提升開發效率和項目可維護性。

---

全局狀態管理

基本步驟：

1.npm install pinia
2.main.js 引入注冊
3.src下創建對應狀態管理目錄store(名不能改變)
4.store中定義user.js
5.在vue中使用

pinia

• Pinia 是 Vue.js 的一個狀態管理庫，它提供了一種更簡單、更直觀的方式來管理 Vue 應用的狀態。
• Pinia是 Vue 的存儲庫，它允許您跨組件/頁面共享狀態，與vuex功能一樣。

1、安裝：
npm install pinia

2、main.js 引入注冊：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Axios from 'axios'
// 第一步：引入pinia
import {createPinia} from 'pinia'var app = createApp(App)
app.config.globalProperties.$axios = Axios// 第二步：創建pinia
const pinia = createPinia()
// 第三步：向vue中注冊安裝pinia
app.use(pinia)app.use(router).mount('#app')

3、src下創建對應狀態管理目錄store(名不能改變)，并定義user.js：

• 在store中創建對應狀態管理對象，定義user.js
  
• Store 是使用 defineStore() 定義的，并且它需要一個唯一名稱，作為第一個參數傳遞
• 這個 name，也稱為 id，是必要的，Pinia 使用它來將 store 連接到 devtools。 將返回的函數命名為 use… 是跨可組合項的約定
• // defineStore('user',{}) user就是這個倉庫的名稱name

4、pinia在vue中使用：

1) 引入，在需要的vue文件中，引用倉庫并獲取對象：

• import {userStore} from '../store/user'
• let userstore = userStore();

2) 取值方式：

• userstore.userid

3) 直接修改數據：

• userstore.userid = x

4) $patch方法修改，修改相應的屬性值,修改多個值，狀態會統一執行一次：

//使用$patch方法  以對象的形式一次性修改
const editAll = () => {userInfoStore.$patch({username: "鴨蛋",age: 21,});

---