>[danger] ## 安裝 ~~~ yarn add pinia # 或者使用 npm npm install pinia ~~~ >[success] # 使用 1. 先將`pinia` 注冊到`vue` ~~~ import { createApp } from "vue"; import App from "./App.vue"; import { createPinia } from "pinia"; const pinia = createPinia(); const app = createApp(App); app.use(pinia); app.mount("#app"); ~~~ 2. 和`vuex `不同在于 `pinia` 是通過一個一個`Store`，一個 Store （如 Pinia）是一個實體里包含了，[state](https://pinia.web3doc.top/core-concepts/state.html)、[getters](https://pinia.web3doc.top/core-concepts/getters.html)和[actions](https://pinia.web3doc.top/core-concepts/actions.html) ，保存了全局的狀態，在你的應用程序中定義任意數量的Store來管理你的狀態，使用`defineStore ` 注冊數據store * id，是必要的，`Pinia `使用它來將 `store `連接到 `devtools`。 * options 一個對象，store的配置項，比如配置store內的數據，修改數據的方法等 * 返回的函數統一使用`useX`作為命名方案，這是約定的規范 ~~~ // \src\store\modules\users.js import { defineStore } from 'pinia' // 第一個參數是應用程序中 store 的唯一 id export const useUsersStore = defineStore('users', { // 其它配置項 state: () => ({ name: "ww", age: 12, }), }) ~~~ 3. 在頁面直接使用注冊`Store` 通過調用函數來使用 ~~~ <template> <div @click="changeName"> {{ usersStore.name }} </div> </template> <script setup> // 直接導入 defineStore 創建對應位置 store import { useUsersStore } from "@/store/modules/users"; // 使用創建的 defineStore 創建的 usersStore 函數 const usersStore = useUsersStore(); function changeName() { usersStore.name = "zz"; } console.log(usersStore); </script> ~~~ * 使用打印我們自己創建的 `useUsersStore `  >[danger] ##### 剛使用時候疑惑 如果定義了兩個store，用同名屬性該怎么辦？實際`pinia ` 和`vuex` 在管理上不同，每一個store 是獨立的，并不是像`vuex` 在一個根上會出現這種同名問題，正因為相對獨立更加函數式編程