带有参数的 Vuex 映射 Getter - 缓存? [英] Vuex Mapping Getter with Argument - Cached?

问题描述

这是一个带有 参数化 getter 的 Vuex Store 示例，我需要将其映射到 Vue 实例以在模板中使用.

Here is an example of a Vuex Store with a parameterized getter which I need to map onto the Vue instance to use within the template.

const store = new Vuex.Store({
  state: {
    lower: 5,
    higher: 10,
    unrelated: 3
  },
  getters: {
    inRange: state => value => {
      console.log('inRange run')
      return (state.lower <= value) && (state.higher >= value)
    }
  },
  mutations: {
    reduceLower: state => state.lower--,
    incrementUnrelated: state => state.unrelated++
  }
})

new Vue({
  el: '#app',
  template: "<div>{{ inRange(4) }}, {{ unrelated }}</div>",
  store,
  computed: Object.assign(
    Vuex.mapGetters(['inRange']),
    Vuex.mapState(['unrelated'])
  ),
})

setTimeout(function() {
  console.log('reduceLower')
  store.commit('reduceLower')
  setTimeout(function() {
    console.log('incrementUnrelated')
    store.commit('incrementUnrelated')
  }, 3000);  
}, 3000);

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex/dist/vuex.js"></script>
<div id="app"></div>

首先，这似乎是有效的工作代码.但是，考虑到 computed 意味着是一组缓存的计算属性，我很好奇这种情况下的行为，是否有缓存?如果没有，是否需要考虑性能问题?即使函数不会引起任何状态变化，它是否应该是一个method?

Firstly, this does appear to be valid, working code. However considering computed is meant to be a cached set of computed properties, I'm curious about the behavior in this scenario, is there caching going on? If there isn't, is there a performance concern to consider? Even though the function does not cause any state change, should it be a method?

这是一种反模式吗?这个例子不是一个真实的例子，但我确实想在商店中集中逻辑.

Is this an anti-pattern? The example isn't a real one, but I do want to centralize logic in the store.

更新

我更新了示例以说明对 inRange 获取器所基于的基础 lower/higher 值的修改确实对 Vue 实例具有反应性(尽管没有被映射为状态).我还包含了一个 unrelated 值，它不是计算的一部分，如果映射的 getter 被缓存，修改无关值不应该触发再次调用 getter，但它确实如此.

I have updated the example to illustrate that modifications to the underlying lower/higher value upon which the inRange getter is based, are indeed reactive for the Vue instance (despite not being mapped as state). I have also included an unrelated value which is not part of the calculation, if the mapped getter were cached, modifying the unrelated value should not trigger the getter to be called again, however it does.

我的结论是没有缓存，因此它的性能比传统的计算属性差，但它在功能上仍然是正确的.

My conclusion is that there is no caching, thus this has poorer performance than a conventional computed property, however it is still functionally correct.

关于这种模式是否有任何缺陷，或者哪个可用的表现更好的问题仍然存在疑问.

The question remains open as to whether there is any flaw in this pattern, or one available which performs better.

推荐答案

在我看来，这是一种反模式.这是一种汇集方法的奇怪方式.另外，不，这里没有缓存，因为 inRange 立即返回一个值(最终函数)而不使用 state 中的任何成员 - 因此 Vue 检测到 0 个反应性依赖项.

In my opinion this is an anti-pattern. It's a strange way to funnel a method. Also, no, there isn't caching here since inRange immediately return a value (the final function) without using any members in state - so Vue detects 0 reactive dependencies.

Getter 不能以这种方式参数化，它们只能派生出基于状态的东西.因此，如果范围可以存储在状态中，那将起作用(并且会被缓存).

Getters can't be parameterized in this way, they can only derive things that are based in state. So if the range could be stored in state, that would work (and would be cached).

这里有类似的问题:vuexjs getter with argument

既然你想集中这种行为 - 我认为你应该在一个单独的模块中做到这一点，也许作为一个混合.这也不会被缓存，因此您必须将它(和输入)包装在组件的 computed 中或使用其他一些备忘录

Since you want to centralize this behavior - I think you should just do this in a separate module, perhaps as a mixin. This won't be cached, either, so you would have to wrap it (and the input) in a component's computed or use some other memoization

像这样:

import { inRange } from './state/methods';
import { mapGetters }  from 'vuex';

const Example = Vue.extend({
  data: {
    rangeInput: 10
  },
  computed: {
    ...mapGetters(['lower', 'higher']),
    inRange() {
      return inRange(this.rangeInput, this.lower, this.higher);
    }
  }
});

这篇关于带有参数的 Vuex 映射 Getter - 缓存?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！