共享状态的问题是很难在不同的组件中重用动作和突变。

让我们假设我们有一个组件Votes。该组件允许用户对项目进行投票

因此，当用户单击时，将调度+一个动作。upvote

但是如何在两个视图中重用这个组件，一个列出所有项目的列表，一个显示项目详细信息的详细信息。

在这两种情况下，我们都允许用户对项目进行投票。

[添加] Vue路由器

用户可以通过 URL 导航，例如/item/a

在这种情况下，应该使用路由器参数在数据库中查找项目。

store.items是空的！

问题从商店开始..

upvote并且SET_VOTE是从不同点（不同观点）调用的动作和突变，因此状态是不同的。

问题

如何在具有不同状态的不同视图中重用相同的动作/突变？

[已添加]记住

1. 用户可以通过 URL 导航，例如/item/a应该显示项目
2. 目标是重用动作/突变和组件。所以重复所有不会解决这个问题。

完整源码....

或者在小提琴：http: //jsfiddle.net/Ridermansb/sqmofcbo/3/

在Vue 论坛中添加另一个帖子（交叉发帖）

我收到以下错误。

[Vue 警告]：属性或方法“updateData”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明反应数据属性。

据我通过代码可以看出，该方法就在那里，所以由于我对 Vuex 的无知，我被困在我想念的东西上。我用谷歌搜索了这件事并得到了很多答案，但没有一个让我更明智地做什么。这似乎是有范围的东西，我感觉到了。

我也收到以下错误，但我怀疑这两者的根本原因相同，因此解决一个将解决另一个。

[Vue 警告]：事件“单击”的无效处理程序：未定义（在...的组件中找到）

标记如下。我已经检查了路径是否到达了正确的位置。目前我完全不确定如何开始对其进行故障排除。任何提示将不胜感激。

编辑

输入后，我改进了导出以包含这样的方法属性。（但仍然存在相同的错误。）

我必须在商店里做一些额外的事情吗？它看起来像这样。

我有这种绑定样式：

从这个计算的属性：

this.errors指的是来自 Vuex 的这个计算属性：

使用 将错误添加到数组中array.push。当添加或删除一个错误时，样式绑定可以正常工作，但在初始页面加载时，可能会由于不同的异步任务失败（http 请求）快速连续添加两个或更多错误，在这种情况下，我的 errHeight() 计算属性只返回 1 错误的高度。

编辑：

如果我将高度计算移动到具有延迟的观察者中，它确实有效，只要延迟比影响高度的异步函数长。setTimeout(this.calcHeight, 1000);并不是一个真正令人满意的解决方案。

我正在尝试设计一个商店来管理我的 Vuex 应用程序的事件。到目前为止，我有以下内容。

我将有一些列表项，这些项应该在单击时更改存储中数据的值。根组件App和菜单栏Navigation的设计如下（最后会有一堆动作，所以我把它们收集在文件actions.js中）。

单击第一个列表项会在控制台中显示输出。但是，当单击第二个时，什么都没有发生，所以我很确定该事件根本没有被调度。呈现页面时，我还看到以下错误：

属性或方法“updateData”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明反应数据属性。

我对 Vuex 很陌生，所以我只是在猜测。我是否需要引用 store 中的updateData操作以及state和mutation？我怎么做？错误消息谈到的“数据选项”是什么/在哪里？这不是我的组件状态和属性吗？

我对这个问题的表述感到不满。鼓励提出改进建议。另外，请记住，由于无知（无知导致烦恼），我可能对 hte 问题的诊断存在缺陷。对于那个很抱歉。

在这个答案中，建议使用它，但由于未定义this.$store.xxx，它在我的代码中失败。this我强烈怀疑代码的作者（那就是我）做了一些愚蠢的事情，所以我将展示我的组件布局的示意图。

它的意图是我有一个登录页面index.js，它创建了两个组件——一个用于应用程序的视觉效果，一个用于存储信息。可视化应用程序将包含一个导航栏（以及稍后的渲染区域）。导航栏将命令发送到商店（和查看区域）呈现不同的 *.vue 文件，显示表格、列表等。

那么，我怎么会看到this is undefined的文本呢？我的结构是否完全有缺陷，或者我只是在这里和那里遗漏了一个小细节？

index.js

store.js

应用程序.vue

导航.vue

动作.js

我正在学习 Vue，我注意到我在任何地方或多或少都有以下语法。

一直写出来很痛苦this.$store.state.donkey，也降低了可读性。我感觉到我正在以一种不太理想的方式来做这件事。我应该如何参考商店的状态？

我需要将 v-for 与 v-model 一起使用。我阅读了文档并且没有示例说明如何在不执行突变处理程序之外执行突变的情况下将其与 v-for 一起使用。

如何在不直接改变属性的情况下在 v-for 中使用 v-model？

我有这样的设置。它是一个元素被单击并调用一个方法，使用它要识别的特定字符串。当然，我更愿意提供 ID，这样我就不必维护多余的名称。

当我去 googlearching 时，我在这里和那里看到使用的语法是v-on="click: clickaroo"而不是文档中显示的，即v-on:click="clickaroo"。前者似乎根本不起作用，更不用说给我带来正确的价值了。

我也发现什么都没有，现在我很困惑如何解决这个问题。像我一样在 Vue 中提供参数是正确的方法吗？

我有一个具有以下渲染（计算道具）的组件。它可以工作并显示 blopp 应该显示的文本，但 blpp没有任何内容。在最终版本中，我希望它生成一个从商店状态中获取的字符串列表，并用作blpp。

它基于以下模板呈现。

store的实现看起来像这样，将getter带到了开放论坛。

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

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

temp.$store.getters

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

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

将 Vue 实例附加到 HTML 元素时，我可以通过两种方式进行。

1. 通过属性引用，el:"#rooty"
2. 通过方法调用，$mount("#rooty")

我无法在他们之间做出决定。它们是否完全等价？如果一个更新或过时，推荐哪一个？还有其他区别吗？在这种情况下，会是什么？

通过属性引用。

通过方法调用。