快捷導(dǎo)航

vue中狀態(tài)管理器Pinia的用法詳解

更新時間：2023年10月20日 14:36:45 作者：yuobey

Pinia?是?Vue.js?的輕量級狀態(tài)管理庫,最近很受歡迎,它使用?Vue?3?中的新反應(yīng)系統(tǒng)來構(gòu)建一個直觀且完全類型化的狀態(tài)管理庫,下面就跟隨小編一起來學(xué)習(xí)一下它的具體使用吧

一、pinia介紹

Pinia 是 Vue.js 的輕量級狀態(tài)管理庫，最近很受歡迎。它使用 Vue 3 中的新反應(yīng)系統(tǒng)來構(gòu)建一個直觀且完全類型化的狀態(tài)管理庫。

Pinia的成功可以歸功于其管理存儲數(shù)據(jù)的獨(dú)特功能(可擴(kuò)展性、存儲模塊組織、狀態(tài)變化分組、多存儲創(chuàng)建等)。

pinia優(yōu)點(diǎn)：

符合直覺，易于學(xué)習(xí)
極輕，僅有 1 KB
模塊化設(shè)計(jì)，便于拆分狀態(tài)
Pinia 沒有 mutations，統(tǒng)一在 actions 中操作 state，通過this.xx 訪問相應(yīng)狀態(tài)雖然可以直接操作 Store，但還是推薦在 actions 中操作，保證狀態(tài)不被意外改變
store 的 action 被調(diào)度為常規(guī)的函數(shù)調(diào)用，而不是使用 dispatch 方法或 MapAction 輔助函數(shù)，這在 Vuex 中很常見
支持多個Store
支持 Vue devtools、SSR 和 webpack 代碼拆分

pinia缺點(diǎn)：

不支持時間旅行和編輯等調(diào)試功能

二、安裝使用Pinia

在項(xiàng)目根目錄中打開終端，輸入以下命令

yarn add pinia@next 
# or with npm 
npm install pinia@next
// 該版本與Vue 3兼容，如果你正在尋找與Vue 2.x兼容的版本，請查看v1分支。

直接在main.js中使用

import { createApp } from "vue";
import App from "./App.vue";
import { setupStore } from "./store/index"; //引入pinia 緩存實(shí)例
const app = createApp(App);
setupStore(app); //把創(chuàng)建出來的vue實(shí)例app 傳入setupStore函數(shù) 進(jìn)行掛載
app.mount("#app");

創(chuàng)建store文件夾，一般的項(xiàng)目我們可以不區(qū)分模塊，但是按照習(xí)慣，個人覺得區(qū)分模塊會讓代碼閱讀起來更加清晰

如：

store/index.js

import { createPinia } from "pinia";
const store = createPinia();
export function setupStore(app) {
    app.use(store);
}
export { store };

創(chuàng)建模塊app.js代碼：

import { defineStore } from "pinia";
export const useAppStore = defineStore({
  // id is required so that Pinia can connect the store to the devtools
  id: "app",
  state: () => ({
    clientWidth: "",
    clientHeight: ""
  }),
  getters: {
    getClientWidth() {
      return this.clientWidth;
    },
    getClientHeight() {
      return this.clientHeight;
    }
  },
  actions: {
    setClientWidth(payload) {
      try {
        setTimeout(() => {
          this.clientWidth = payload;
        }, 2000);
      } catch (error) {}
    },
    setClientHeight(payload) {
      try {
        setTimeout(() => {
          this.clientHeight = payload;
        }, 2000);
      } catch (error) {}
    }
  }
});

使用其實(shí)很簡單，只要在對應(yīng)組件引入對應(yīng)的模塊

如：

<template>
  {{ width }}
</template>

<script>
import { ref, reactive, onMounted,computed } from "vue";
import { useAppStore } from "@/store/modules/app";

export default {
  name: "App",
  setup() {
    const appStore = useAppStore();
    const width = computed(() => {
      return appStore.clientWidth;
    });
    onMounted(() => {
      appStore.setClientWidth(200);
    });
    return {
      width,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

pinia還可以在當(dāng)前模塊很直觀的使用其他模塊的方法

如：

import { defineStore } from "pinia";
import { useOtherStore } from "@/store/modules/other.js";
export const useAppStore = defineStore({
  // id is required so that Pinia can connect the store to the devtools
  id: "app",
  //state必須是一個返回對象的函數(shù)
  state: () => ({
    clientWidth: "",
    clientHeight: ""
  }),
  getters: {
    getClientWidth() {
      return this.clientWidth;
    },
    getClientHeight() {
      return this.clientHeight;
    },
       // 使用其它 Store
    otherStoreCount(state) {
      // 這里是其他的 Store，調(diào)用獲取 Store，就和在 setup 中一樣
      const otherStore = useOtherStore();
      return otherStore.count;
    },
  },
  actions: {
    setClientWidth(payload) {
      try {
        setTimeout(() => {
          this.clientWidth = payload;
        }, 2000);
      } catch (error) {}
    },
    setClientHeight(payload) {
      try {
        setTimeout(() => {
          this.clientHeight = payload;
        }, 2000);
      } catch (error) {}
    },
    // 使用其它模塊的action
    setOtherStoreCount(state) {
      // 這里是其他的 Store，調(diào)用獲取 Store，就和在 setup 中一樣
      const otherStore = useOtherStore();
         otherStore.setMethod()
    },
  }
});

三、Pinia 中Actions改變state的幾種方法

我們在組件中，引入對應(yīng)模塊后如：

<template>
  {{ width }}
</template>

<script>
import { ref, reactive, onMounted,computed } from "vue";
import { useAppStore } from "@/store/modules/app";

export default {
  name: "App",
  setup() {
    const appStore = useAppStore();
    const width = computed(() => {
      return appStore.clientWidth;
    });
    onMounted(() => {
      appStore.setClientWidth(200);
    });
    //演示三種方法修改state
    const changeAppstoreStateClick = () => {
     // 方式一：直接修改 -> 'direct'
      appStore.clientWidth += 400;
     // 方式二：patch對象方式 -> 'patch object'，調(diào)用$patch 傳入要修改的鍵和val
      appStore.$patch({
        clientWidth: appStore.clientWidth + 400,
      });
      // 方式三：patch函數(shù)方式 -> 'patch function'，可鍵入語句，執(zhí)行復(fù)雜邏輯
      appStore.$patch((state) => {
        state.clientWidth += 400;
      });

    };
    return {
      width,
      changeAppstoreStateClick
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

以上就是vue中狀態(tài)管理器Pinia的用法詳解的詳細(xì)內(nèi)容，更多關(guān)于vue狀態(tài)管理器Pinia的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: