Vue動態加載Vuex的方法

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

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

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

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

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

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

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

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

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

這同樣適用于分為幾個內部軟件包的應用程序。每個包，可能有自己的組件 和儲存。

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

讓我們一起來看看它是怎樣實現的吧。

動態為存儲新增模塊

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

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

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

然后創建一個 Notifications.vue 文件并導入。然后您將訪問 $store 實例變量，假設有一個 Vuex 存儲來獲取來獲取狀態，并提交一個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>

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

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

import state from "./state";

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

現在，當使用 Notifications 組件時，模塊將被自動注冊。

包起來

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

上文描述的就是Vue動態加載Vuex的方法，具體使用情況還需要大家自己動手實驗使用過才能領會。如果想了解更多相關內容，歡迎關注億速云行業資訊頻道！