我目前正在使用 Handsontable 和 Vue 开发一个大数据网格，我的数据存储在 Vuex 中。问题是，当我编辑一个单元格时，我得到了 Vuex 突变错误。在 ag-grid 中，我可以使用 valueSetters 和 getters 来避免这种情况，但我在 Handsontable 中找不到如何做到这一点。此外，由于突变错误，不会触发 afterChange 事件。计算值获取和设置也对我没有帮助。有人有同样的问题吗？我可能可以编写自定义编辑器，但这是我最不想做的事情，所以可能还有其他解决方案。
谢谢。
【问题讨论】：
标签： vue.js vuex handsontable
选项 1：确保将 vuex 存储中的 a copy of the data 提供给 Handsontable 的 settings.data 属性。这样，当 Handsontable 更改数据时，vuex 不会抱怨，但您必须确保所有更改都提交到 store。
例子：
get settings() {
return {
data: JSON.parse(JSON.stringify(this.data)),
};
}
选项 2：添加一个 beforeChange hook 将更改提交到存储，然后返回 false。这使得 Handsontable 忽略所有更改。这将确保 Handsontable 始终显示提交给 vuex 存储的内容。警告：这也意味着 Handsontable 将在单元格被编辑后直接显示旧值，直到它被提交到存储。
例子：
public beforeChange(changes, source) {
if (source === "edit") {
changes
.map((change, i) => {
const [index, attribute, oldValue, newValue] = change;
const oldRow = this.settings.data[index];
this.$store.dispatch("rowChange", { data: oldRow, index, attribute, oldValue, newValue });
});
// disregard all changes until they are propagated via vuex state commits
return false;
}
}
（如果分享一些具体的代码示例，详细帮助会更容易）
【讨论】：
不要直接改变数据，这是一种反模式，如果被发现这样做很可能会出错。
尝试在 Vuex 中编写突变，并使用您想要更新的有效负载数据提交这些突变。把所有的状态更新逻辑写在mutations里面。
如果数据是从异步源获取的，请尝试为每次更改分派操作，并在这些操作中提交突变，其余部分与上述相同。
希望对你有帮助。
【讨论】：