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 儲存是透過不同模組靜態組織的。應該是這樣的。但是在非常特殊的情況下，您可能需要擴展存儲並自行添加一個模組。

推薦教學：《JS教學》

以上是Vue 動態載入 Vuex的詳細內容。更多資訊請關注PHP中文網其他相關文章！