javascript - 实现 Vuex 模块后，我所有的 getter 和mutations 都停止工作

Question

我目前正在实现 Vuex 并决定实现模块。

在此之前，一切都运行正常，并且 Vuex 管理状态没有任何问题。

在我读过的所有教程和我看过的视频中，人们简单地实现了模块，他们的应用程序总是立即运行，无需任何额外的配置。

但是，在我的应用程序中，所有调用的突变现在都会抛出无法从未定义中读取的错误。

这是我所拥有的示例配置:https://codesandbox.io/s/4zro5wzjz0

更新:Bas van Dijk的回答非常有值(value)，但问题实际上是不同的 - 在codesandbox中我不允许上传整个应用程序，因此，我无法将其关联起来适本地。但为了使这篇文章具有一定的值(value)，我将解释基本发生的事情。

我试图在模块之​​间进行交互，而不将它们导入到要使用的地方，因此我的一个模块试图操纵另一个模块的值，但它实际上并不在那里。

发生这种情况是因为我必须分离最初的 Vuex 对象，它本身就是一个很大的对象。对于阅读这篇文章的任何人来说，一个好的结论是——始终从规模开始，扩展已经分离的配置比拥有一个需要手动分离的整体数据要容易得多。

Answer 1

您没有在 main.js 中导入您的商店。因此它是未定义的。

import store from "./store";

new Vue({
  store,
  el: "#app",
  components: { App },
  template: "<App/>"
});

您声明还错过了 stakeControls 对象

const state = {
  stakeControls: {
    enabled: true
  },
  stake: {
    value: 10
  }
};

我还将您的商店导出更改为

export default new Vuex.Store({
  modules: {
    Stake
  }
});

参见https://codesandbox.io/s/4zro5wzjz0