一、Pinia是什么？
Pinia 是 Vue 的專屬狀態管理庫，它允許支持跨組件或頁面共享狀態，即共享數據，他的初始設計目的是設計一個支持組合式API的 Vue 狀態管理庫（因為vue3一個很大的改變就是組合式API）,當然這并不是說Pinia只支持vue3，他是同時支持vue2和vue3的，本文傾向于擁抱Vue3，所以代碼語法都是傾向用組合式api的寫法
二、在vue3中使用Pinia
下面的流程和相關代碼均基于vue3項目
1、安裝pinia
npm install pinia或用yarn安裝
yarn add piniapackage.json中看到pinia表示安裝成功?
2、創建pinia實例并將其傳遞給應用
//src/main.js//創建應用實例
import { createApp } from "vue";
import App from "./App.vue";
let app = createApp(App);//pinia實例
import { createPinia } from "pinia";
let pinia = createPinia();
app.use(pinia);app.mount("#app");掛載完成后，我們就可以在Vue的devtools里看到Pinia了
3、定義Store
Store 是用?defineStore()?定義的，它的第一個參數要求是一個獨一無二的名字,在整個應用中保持唯一，?返回的函數命名為?use...?是一個符合組合式函數風格的約定
import { defineStore } from "pinia";//命名規則，建議以 `use` 開頭且以 `Store` 結尾，即 use~~~Store
export const useMapStore = () => {// 其他配置...
}
Setup store(Option Store可以查看官方，本文不列舉)
import { defineStore } from "pinia";
import { reactive, computed } from "vue";
import type { City, Province } from "@/interface/common";export const useMapStore = defineStore("mapStore", () => {//statelet cityList = reactive<Array<City>>([]);let provinceList = reactive([]);//getterconst simpleCityList = computed(() => {return cityList.filter((item) => item.code != "110000");});//actionsfunction changeCityList(list: City[]) {console.log("修改城市列表數據的事件被觸發");cityList = Object.assign(cityList, list);}function changeProviceList(list: Province[]) {console.log("修改省份列表數據的事件被觸發");provinceList = Object.assign(provinceList, list);}return {cityList,provinceList,simpleCityList,changeCityList,changeProviceList,};
});
?
4、使用store
<template><div>您好！歡迎來到星野的小世界</div><div>星野的目標是走遍中國的每一個省，中國的省如下：</div><div><ul><li v-for="city in cityList" :key="city.code">{{ city.name }}</li></ul></div>
</template><script setup lang='ts' name='Login'>
import { onMounted} from 'vue';
import { storeToRefs } from 'pinia';
import { getCityList } from "@/utils/common";
import { useMapStore } from '@/stores/map'let mapStore = useMapStore()
let { cityList } = storeToRefs(mapStore) //為了從 store 中提取屬性時保持其響應性，需要使用 storeToRefs()。它將為每一個響應式屬性創建引用onMounted(async () => {let list = await getCityList()mapStore.changeCityList(list) //修改store里的屬性數據
})
</script>
<style lang='scss' scoped></style>getCityList是一個工具函數，調用一個免費api獲取中國的城市數據?
在?Setup Store?中：
ref()?/reactive ( ) 就是?state?屬性computed()?就是?gettersfunction()?就是?actions
頁面效果
5、修改store中的state
例如store中的state有一個城市統計屬性： cityCount
在業務組件里，就可以通過mapStore.cityCount 直接修改數量
?
如果state有很多屬性，還可以調用?$patch?方法。它允許你用一個?state?的補丁對象在同一時間更改多個屬性
mapStore.$patch({cityCount: mapStore.cityCount + 1,provinceCount: mapStore.provinceCount + 1})好啦，Pinia 滿足基礎使用的讀寫改操作已經描述完畢，關于搭配?Nuxt?的 Pinia 完成SSR，后續會單獨出文，敬請期待！😁
ps： 學習成長過程的簡單記錄，如有不恰當之處，歡迎交流
)
