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

Question

我有一个具有以下渲染的组件 (computed props)。它可以正常工作并显示 blipp 应该显示的文本，但 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 of the store looks like this bringing the getters去开论坛。

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

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

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

temp.$store.getters

我得到一个对象，其中列出了这样的吸气剂。

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

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

Answer 1

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

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

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

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

Example Vuex JSFiddle

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

Can't access getters in the store for Vue when in a template

javascript

data-binding

store

vue.js

vuex