一、Pinia是什么？

Pinia 是 Vue 的專(zhuān)屬狀態(tài)管理庫(kù)，它允許支持跨組件或頁(yè)面共享狀態(tài)，即共享數(shù)據(jù)，他的初始設(shè)計(jì)目的是設(shè)計(jì)一個(gè)支持組合式API的 Vue 狀態(tài)管理庫(kù)（因?yàn)関ue3一個(gè)很大的改變就是組合式API）,當(dāng)然這并不是說(shuō)Pinia只支持vue3，他是同時(shí)支持vue2和vue3的，本文傾向于擁抱Vue3，所以代碼語(yǔ)法都是傾向用組合式api的寫(xiě)法

二、在vue3中使用Pinia

下面的流程和相關(guān)代碼均基于vue3項(xiàng)目

1、安裝pinia

npm install pinia

或用yarn安裝

yarn add pinia

package.json中看到pinia表示安裝成功?

2、創(chuàng)建pinia實(shí)例并將其傳遞給應(yīng)用

//src/main.js

//創(chuàng)建應(yīng)用實(shí)例
import { createApp } from "vue";
import App from "./App.vue";
let app = createApp(App);

//pinia實(shí)例
import { createPinia } from "pinia";
let pinia = createPinia();
app.use(pinia);

app.mount("#app");

掛載完成后，我們就可以在Vue的devtools里看到Pinia了

3、定義Store

Store 是用?defineStore()?定義的，它的第一個(gè)參數(shù)要求是一個(gè)獨(dú)一無(wú)二的名字,在整個(gè)應(yīng)用中保持唯一，?返回的函數(shù)命名為?use...?是一個(gè)符合組合式函數(shù)風(fēng)格的約定

import { defineStore } from "pinia";

//命名規(guī)則，建議以 `use` 開(kāi)頭且以 `Store` 結(jié)尾，即 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", () => {
  //state
  let cityList = reactive<Array<City>>([]);
  let provinceList = reactive([]);

  //getter
  const simpleCityList = computed(() => {
    return cityList.filter((item) => item.code != "110000");
  });

  //actions
  function changeCityList(list: City[]) {
    console.log("修改城市列表數(shù)據(jù)的事件被觸發(fā)");
    cityList = Object.assign(cityList, list);
  }
  function changeProviceList(list: Province[]) {
    console.log("修改省份列表數(shù)據(jù)的事件被觸發(fā)");
    provinceList = Object.assign(provinceList, list);
  }

  return {
    cityList,
    provinceList,
    simpleCityList,
    changeCityList,
    changeProviceList,
  };
});

?

4、使用store

<template>
    <div>您好！歡迎來(lái)到星野的小世界</div>
    <div>星野的目標(biāo)是走遍中國(guó)的每一個(gè)省，中國(guó)的省如下：</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 中提取屬性時(shí)保持其響應(yīng)性，需要使用 storeToRefs()。它將為每一個(gè)響應(yīng)式屬性創(chuàng)建引用

onMounted(async () => {
    let list = await getCityList()
    mapStore.changeCityList(list) //修改store里的屬性數(shù)據(jù)
})
</script>
<style lang='scss' scoped></style>

getCityList是一個(gè)工具函數(shù)，調(diào)用一個(gè)免費(fèi)api獲取中國(guó)的城市數(shù)據(jù)?

在?Setup Store?中：

• ref()?/reactive ( ) 就是?state?屬性
• computed()?就是?getters
• function()?就是?actions

頁(yè)面效果

5、修改store中的state

例如store中的state有一個(gè)城市統(tǒng)計(jì)屬性： cityCount

在業(yè)務(wù)組件里，就可以通過(guò)mapStore.cityCount 直接修改數(shù)量

?

如果state有很多屬性，還可以調(diào)用?$patch?方法。它允許你用一個(gè)?state?的補(bǔ)丁對(duì)象在同一時(shí)間更改多個(gè)屬性

 mapStore.$patch({
        cityCount: mapStore.cityCount + 1,
        provinceCount: mapStore.provinceCount + 1
    })

好啦，Pinia 滿(mǎn)足基礎(chǔ)使用的讀寫(xiě)改操作已經(jīng)描述完畢，關(guān)于搭配?Nuxt?的 Pinia 完成SSR，后續(xù)會(huì)單獨(dú)出文，敬請(qǐng)期待！??

ps： 學(xué)習(xí)成長(zhǎng)過(guò)程的簡(jiǎn)單記錄，如有不恰當(dāng)之處，歡迎交流文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-836653.html

到了這里，關(guān)于Vue狀態(tài)管理庫(kù)-Pinia的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！