为什么我的组件在此vuejs应用程序中没有被动更新？

Question

此刻我正在向黑暗中射击。下面的代码（和开发环境）没有什么值得骄傲的。我刚刚开始学习使用一个小项目作为豚鼠的vuejs。我正在推进，但我对vuex有一个问题。

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

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

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

如果您不想打扰运行代码，可以向下滚动到“跟随流程”部分的底部。

代码/运行示例/演示

我添加了一个标记以保留对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”拥有，“root”也需要通过chown来修复（但通常，我认为不会创建任何文件）。 / p>

一切就绪并使用泊坞窗，前端应该可以使用：

运行

cd powonline/frontend
./npm run dev

准备测试示例数据

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

然后您应该看到以下内容：

关注流程和我的想法

• 用户点击“分配”调用assign来调用vuex操作assignTeamToRouteRemote
• 这会触发异步远程操作。一旦返回，则使用assignTeamToRoute突变提交新数据。 这是我期望触发反应性更新，但不是！
• 我已添加了一个动作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))
}

你可能需要做一些类似于从队列中删除队伍的突变。