代码之家 › 专栏 › 技术社区 › thatOneGuy

如何重新运行Vuex Getter

vuex vue.js javascript

thatOneGuy · 技术社区 · 7 年前

也许我误解了Vuex中的getter是什么,但假设我有一个getter,它可以获得DOM元素的大小,例如div。我会这样做:

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

现在,当我启动我的应用程序时,所有的getter似乎都会直接运行。如果div在启动时不可用呢?如何重新运行getter?

我现在像这样运行getter:

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

我想也许这会管用:

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

但是由于store.getter是一个包含属性和值的对象,而这些值不是函数,所以我不能重新运行它们。

有什么想法吗?

1 回复 | 直到 7 年前

Max Sinev 7 年前

吸气剂应该依赖于 state 反应场。你想观察吗 clientWidth 改变-它不起作用。

如果您想像函数一样使用它,那么只需从getter返回函数:

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

}

像这样使用它 getContainerWidth()

推荐文章

matthew · 如何检索存储状态的新旧值

7 年前

dendog · 如何在Vuex状态创建中使用函数

7 年前

Thuan Nguyen · 使用vuex更新数据

7 年前

MaratSR · 在vuex中创建操作的正确方法

7 年前

dendog · 动态填充Vuex状态

7 年前

Andriy Stolyar · 如何在Vuex存储区已经创建之后手动将其添加到Vuex存储区?

7 年前

Cameron · 数据显示在websocket响应中,但未显示在已解决的promise中

7 年前

cmasri · vue test utils:如何在mounted()生命周期挂钩中测试逻辑(使用vuex)?

7 年前

EmacsVI · Vue good表格在填充后不会显示“emptystate”

7 年前

pirmax · VueJS-VueX和flash消息

7 年前