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 });

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

我可能错误地设置了它，但它是很多移动部件，并且对于无知的我来说有点难以诊断。当我尝试在控制台中运行以下内容时，

温度。$ store.getters

我得到一个列出这样的getter的对象。

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

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

Answer 1

getters 的功能与状态类似。因此，要解决这些问题，您可以调用参数而不是方法，即

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

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

我整理了一个JSFiddle，它显示了你可以与vuex商店互动的各种方式，希望它有所帮助：

Example Vuex JSFiddle

在模板中

1 个答案: