如何重新運行Vuex Getter

Question

也許我誤解了Vuex中的getter，但是說我有一個getter可以獲取DOM元素的大小，例如div。 我會做這樣的事情：

const getters = {
  getContainerWidth (state) {
    return document.getElementById('main-content').clientWidth;
  }
}

現在，當我啟動我的應用程序時，所有的吸氣劑似乎都立即運行了。 如果div在啟動時不可用怎么辦？ 如何重新運行吸氣劑？

我現在像這樣運行吸氣劑：

import store from '@/store'
store.getters['myModule/getContainerWidth']

我認為這可能會起作用：

store.getters['myModule/getContainerWidth']()

但是由於store.getters是一個包含屬性和值的對象，並且這些值不是函數，所以無法重新運行它們。

有任何想法嗎？

Answer 1

吸氣劑應依賴於state字段來做出反應。 您要觀察clientWidth變化-它不起作用。

如果要像函數一樣使用它，則只需從getter返回函數：

const getters = {
  getContainerWidth (state) {
    return () => {
       let container = document.getElementById('main-content');
       return container ? container.clientWidth : 0
    };
 }

}

並像getContainerWidth()一樣使用它