渲染Vuex中的错误

Question

我目前正在与Vuex和Vue建立一个项目，但是遇到一个奇怪的问题。我推测它与渲染的顺序有关，但是在多次尝试更改代码均无济于事之后，我仍然不确定。

我尝试的是使用父级中的getter访问状态，并通过插槽传递状态，而不是直接在子级中传递状态，这应该是正确的，正如我将在此处发布的。

我尝试使用$this.$store.state传递值仍然是不确定的，但是在控制台使用实例上的方法记录该值时，所有数据都在那里。

这是我的代码中的link。

那里的错误类似于我自己的控制台中的错误：

[Vue warn]: Error in render: "TypeError: Cannot read property 'state' of undefined"

在此先感谢所有花时间查看的人。

P.S：将其更改为store.state.stake.value时，将显示内容，但出现另一个错误，即[Vue warn]: Invalid handler for event "click": got undefined

Answer 1

强调文本在您的突变中，您正在使用this.$store.state访问状态。这是错误的，因为this没有指向vue实例。

变异处理程序接收state作为第一个参数：

myMutation(state){
    //use state argumentt to access state
}

这里是updated code sandbox

另一件事：mapMutations是一个帮助程序，它将组件方法映射到store.commit调用。因此，它们只是组件中的“将其添加到methods选项中的方法，而不是computed，因为它们没有计算任何内容

Answer 2

将状态作为您的变异函数中的一个参数，如下所示：

increment(state) { 
  state.stake.value += 1;
},

您不需要这样做。$ store在您的商店中。仅在您的Vue组件中