Vue動態(tài)加載Vuex的方法-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關(guān)Vue動態(tài)加載Vuex的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗，為客戶提供超值的營銷型網(wǎng)站建設(shè)服務(wù)，我們始終認為：好的營銷型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個人等客戶提供了成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)服務(wù)，以良好的商業(yè)信譽，完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。

Vuex 是用來處理狀態(tài)管理的高性能解決方案。它使管理大型 Vue.js 變得更輕松，并通過暴露出來的 store 使得狀態(tài)變得可預測。

你可能已經(jīng)知道 Vuex，如果不是的話 Joshua Bemenderfer 在下面為我們很好的介紹它。

你可以像下面這樣定義 Vuex store 模塊：

const dogs = {
  state: {
    data: []
  },
  mutations: {
    addDog(state, dog) {
      state.data.push(dog)
    }
  }
}

const store = new Vuex.Store({
  modules: {
    dogs
  }
});

通常一個大型應(yīng)用都會有很多個模塊，所有模塊都定義在自己的文件中，并通過調(diào)用 new Vuex.Store 時結(jié)合在一起。這也是你一般的處理方法。

但可能會有一個特殊情況，你需要將 Vuex 模塊動態(tài)地加載到你的應(yīng)用程序中，從而擴展到當前的 store 中。

一個比較具體的例子就是編寫一個依賴于 Vuex 的外部組件庫。

這同樣適用于分為幾個內(nèi)部軟件包的應(yīng)用程序。每個包，可能有自己的組件和儲存。

通常，在應(yīng)用程序中這是常見的可重用的模塊。例如，一個 notifications 模塊提供一些通知組件以及一個 store 模塊擴展你的應(yīng)用程序存儲，這樣在你的應(yīng)用程序中添加一個新的模塊在任何一個地方都可以訪問。

讓我們一起來看看它是怎樣實現(xiàn)的吧。

動態(tài)為存儲新增模塊

因為我們使用了 Vuex 的一般設(shè)置，接下來我們創(chuàng)建一個 notifications 文件夾，你可以放在任意位置，想象他是一個外設(shè)的擴展。

在此文件夾下新建 state.js 文件作為我們的 Vuex 模塊:

export default {
  state: [],
  mutations: {
    addNotification(state, notification) {
      state.push(notification);
    }
  }
};

然后創(chuàng)建一個 Notifications.vue 文件并導入。然后您將訪問 $store 實例變量，假設(shè)有一個 Vuex 存儲來獲取來獲取狀態(tài)，并提交一個addNotification：

<template>
  <p>
    <p v-for="notification in notifications">
      {{notification}}
    </p>
    <button @click="addHey">Add Hey!</button>
  </p>
</template>

<script>
import state from "./state";

export default {
  computed: {
    notifications() {
      return this.$store.state.notifications;
    }
  },
  methods: {
    addHey() {
      this.$store.commit("addNotification", "Hey!");
    }
  }
};
</script>

現(xiàn)在，我們的想法是，當使用組件時， Vuex 模塊會自動添加通知。這樣，如果外部應(yīng)用程序使用組件，它將會被打包進來，而應(yīng)用程序無需關(guān)心直接添加它，所以我們可以使用 created 鉤子。

并且，為了動態(tài)添加 Vuex 模塊，我們可以使用 store’s 的實例屬性 $store.registerModule：

import state from "./state";

export default {
  // ...
  created() {
    this.$store.registerModule("notifications", state);
  }
};

現(xiàn)在，當使用 Notifications 組件時，模塊將被自動注冊。

包起來

大型應(yīng)用程序中的 Vuex 存儲是通過不同模塊靜態(tài)組織的。應(yīng)該是這樣的。但是在非常特殊的情況下，您可能需要擴展存儲并自己添加一個模塊。

上文描述的就是Vue動態(tài)加載Vuex的方法，具體使用情況還需要大家自己動手實驗使用過才能領(lǐng)會。如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站欄目：Vue動態(tài)加載Vuex的方法-創(chuàng)新互聯(lián)
分享地址：http://bm7419.com/article24/ihhje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、域名注冊、網(wǎng)站導航、響應(yīng)式網(wǎng)站、網(wǎng)站策劃、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容