为什么我的组件在这个 vuejs 应用程序中没有响应式更新？

Question

我目前正处于黑暗之中。下面的代码（和开发环境）没有什么值得骄傲的。我刚刚开始使用一个小项目作为豚鼠来学习vuejs。我在进步，但是我有一个关于vuex的问题。

我还在胡闹，所以请忽略一些奇怪的代码（尤其是路线/团队分配的选择和结构）。这将在稍后进行重构，并且应该与问题无关。

快速问题描述（详情如下）

• 我有一个 vuex 商店
• 一个视图（路由列表）包含RouteBlock 组件的列表。每个RouteBlock 都包含一个分配给那个 路线的团队列表，以及一个分配给no 路线的团队列表。
• 点击“分配”按钮时，以前未分配的组将被分配到一个路线，并且将从每个的“未分配”列表中消失RouteBlock
• 目前这仅适用于refreshing the complete state from the server。据我了解，这不应该是必要的感谢vuex。我正在尝试找出我需要更改哪些内容才能在不完全刷新的情况下完成这项工作。

如果您不想费心运行代码，可以向下滚动到底部的“Following the Flow”部分。

代码/运行示例/演示

我添加了一个标签来保留对the code at the time of this writing 的引用 这是撰写本文时代码快照的链接。 frontend 文件夹包含 vuejs 代码，而 powonline 文件夹包含 Python 后端。

启动和运行 Python 部分应该很简单：

git clone https://github.com/exhuma/powonline.git
cd powonline
git checkout stackoverflow-2017-06-09
pyvenv env
./env/bin/pip install -e .
./env/bin/python autoapp.py

此原型中的所有内容都在内存中运行。没有持久存储。如果 Python 进程重启，数据会被重置！

vuejs 部分位于the frontend folder。我在设置 npm 时遇到了一些问题，最终在 the frontend root 中创建了两个 docker 容器，并带有两个帮助脚本（1 和 2）。这些脚本包含硬编码的文件夹，当然必须更改！在构建容器时，它们应该具有适当的名称exhuma/npm 和exhuma/vue，以便可以使用帮助脚本运行它们。这些容器之一创建的文件（如果有）很可能归“root”所有，这也需要通过chown 修复（但通常不会创建任何文件，我认为）。

一切就绪，并使用 docker，前端应该可以使用：

cd powonline/frontend
./npm run dev

为测试准备示例数据

• 访问前端
• 点击“团队”
• 添加两个团队（“团队 1”和“团队 2”）
• 点击“路线”
• 添加两条路线（“Route 1”和“Route 2”）

然后您应该会看到如下内容：

---

---

---

随波逐流，我的想法

• 点击“分配”的用户调用assign，它调度到vuex操作assignTeamToRouteRemote
• 这会触发异步远程操作。一旦返回，新数据将使用 assignTeamToRoute 突变提交。 这是我希望触发响应式更新的原因，但事实并非如此！
• 我添加了一个 dispatch to action refreshRemote，因为上面的反应性改变不会发生。我想删除它（如果可能的话）！
• 视图依次使用a computed property (assignedTeams)，它委托给vuex getter assignedTeams。我希望这会在之前的更改之后更新。这是否可能被缓存（根据the docs？）并且vuejs没有检测到getter的变化作为依赖项，因此不会更新缓存？我试图将其移至方法而不是属性，但后来我遇到了一个奇怪的 CORS 问题...

Answer 1

对于 Vuex，最好将状态属性（在突变中）视为不可变的。

您的assignTeamToRoute 突变可能会添加非反应性的对象属性（请参阅https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats）

使用Vue.set...尝试以下操作...

assignTeamToRoute (state, payload) {
  const current = state.route_team_map[payload.routeName] || [];
  Vue.set(state.route_team_map, payload.routeName, current.concat(payload.team.name))
}

您可能需要对从路线中移除团队的突变执行类似的操作。