Question

我是 Vuex 的新手，遇到了一个我无法诊断的问题。我的商店设置与 Shopping example 类似，并且我在下面包含了相关模块。

INIT 操作在应用加载时被调用，并且一切正常。 LOOKUP 操作稍后从组件中调用，但在调用 define 突变时冻结。

当前代码是在尝试了几种解决方法之后。最终，我试图从组件访问 state.pages。我认为问题可能是因为 state.pages 是一个对象，所以我使它成为非反应性的，并试图让组件监视 pageCounter 中的更改以检索新页面，但是那没用。

我可以包含任何其他相关信息。

编辑：简化代码以更具体地显示问题所在。

store/modules/flashcards.js

// initial state
const state = () => ({
    counter: 0,
  })
  
  // actions
  const actions = {
  }
  
  // mutations
  const mutations = {
    increaseCounter(state) {
      console.log(state.counter)
      state.counter++;           <----------- Code stops here
      console.log(state.counter)
  }
  
  export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
  }

访问 store 的组件：

<template>
    <div>
        <md-button @click='increaseCounter'>Test</md-button>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import FlashCardComponent from './FlashcardComponent'
    export default {
        computed: {
            ...mapState({
                counter: state => state.flashcards.counter
            })
        },
        methods: {
            ...mapMutations('flashcards', ['increaseCounter']),
</script>

在 increaseCounter 中，第一个 console.log(state.counter) 被打印出来，但第二个没有。这是一个非常简单的访问模式，因此如果您能深入了解为什么会出现此错误，我将不胜感激。

Answer 1

我发现了这个问题。 ~~创建 Store 对象时使用了 strict 标志。一旦我删除了它，一切都正常了。~~正如 Tordek 所说，不要这样做。

我想我需要弄清楚为什么这是一个问题，因为它指向在突变之外被操纵的状态。

修改反应状态属性时Vuex冻结

1 个答案: