在模板中时无法访问商店中的 Vue 获取器

Question

我有一个具有以下渲染的组件 (computed props)。它可以正常工作并显示 blopp 应该显示的文本，但对于 blpp 则没有。在最终版本中，我希望它生成一个从商店状态中获取的字符串列表，并用作 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>

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

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

第二个组件根本没有任何价值，我不确定从哪里寻找原因。

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

temp.$store.getters

我得到一个对象，它列出了像这样的 getter。

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

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

Answer 1

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

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

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

我整理了一个 JSFiddle，展示了您可以与 vuex 的 store 交互的各种方式，希望对您有所帮助：

Example Vuex JSFiddle