javascript - 在模板中时无法访问 Vue 商店中的 getter

Question

我有一个具有以下渲染效果的组件 ( computed props )。它可以正常工作并按 blopp 的预期显示文本，但对于 blipp 则不显示任何内容。在最终版本中，我希望它生成从商店状态带来的字符串列表并用作 blipp。

export default {
  computed:{
    blopp: function(){ return "ghjk,l"; },
    blipp: function(){ return this.$store.getters.getBlipp(); }
  }
}

它是根据以下template渲染的.

<template>
  <div>
    ...
    <div v-bind:blopp="blopp">{{blopp}}</div>
    <div v-bind:blipp="blipp">{{blipp}}</div>
  </div>
</template>

implementation store的看起来像这样带来 getters到开放论坛。

...
const state = { blipp: [], ... };
const getters = {
  getBlipp: function() { return state.Blipp; }, ...
}
export default new Vuex.Store({ state, mutations, actions, getters });

第二个组件根本没有任何值(value)，我不知道在哪里寻找原因。

我可能设置不正确，但它有很多移动部件，对于无知的我来说有点难以诊断。当我尝试在控制台中运行以下命令时，

temp.$store.getters

我得到一个对象，其中列出了这样的 setter/getter 。

...
blipp:(...)
get blipp: function()
__proto__: Onject

不确定如何处理该信息...它似乎是一个函数，但当我尝试调用它时，它说它未定义。

Answer 1

getter 的功能与状态类似。因此，要解决它们，您调用参数而不是方法，即

blipp: function() { return this.$store.getters.getBlipp }

在这种情况下，您可能希望将 getBlipp 重命名为 blipp

我整理了一个 JSFiddle，它展示了与 vuex 商店交互的各种方式，希望它有所帮助:

<强> Example Vuex JSFiddle