javascript - Vuex - 基于模块状态的计算属性不会在调度时更新？

Question

我正在探索 Vuex 的模块文档，现在已经停滞了很长一段时间，无法从使用它的组件更新模块状态中的值。这是我目前所拥有的:

app/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import Counter from './modules/Counter'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: { Counter }
})

app/store/modules/Counter.js

const state = {
  current: 0
}

const mutations = {
  INCREMENT_CURRENT_COUNT (state) {
    state.main++
  }
}

const actions = {
  increment ({ commit }) {
    commit('INCREMENT_CURRENT_COUNT')
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

app/components/Test.vue

<template>
  <div id="wrapper">
    <p>{{ count }}</p>
    <button @click="something()">Do something</button>
    <button @click="add()">Add to count</button>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'

  export default {
    computed: mapState({
      count: state => state.Counter.current
    }),
    methods: {
      something () {
        alert('hello')
      },
      ...mapActions('Counter', {
        add: 'increment'
      }),
    }
  }
</script>

基本上，我要做的就是在单击组件中触发 add() 的按钮时增加 Counter 模块中的 current 值 方法，这正是我所期望的，但实际上并没有发生什么。

所以没有错误，vue 组件中的 count 值保持为 0。

关于我在这里做错了什么有什么想法吗？

Answer 1

您应该将 state.main++ 更改为 state.current++

const mutations = {
  INCREMENT_CURRENT_COUNT (state) {
    // change state.main -> state.current
    state.current++
  }
}