Vuex - вычисляемое свойство, основанное на состоянии модулей, не обновляется при отправке?

Question

Я изучаю документацию по модулям для Vuex и уже довольно давно застрял при обновлении значения в состоянии модуля из компонента, который его использует. Вот что у меня есть:

приложение / магазин / 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 }
})

приложение / магазин / модули / 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
}

приложение / компоненты / 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>

По сути, все, что я пытаюсь сделать, это увеличить значение current в модуле Counter при нажатии кнопки в компоненте, который запускает метод add(), это то, что я мог бы ожидать, учитывая вышеизложенное, но что на самом деле ничего не происходит.

Таким образом, ошибки нет, и значение count в компоненте vue остается равным 0.

Есть идеи, что я тут делаю не так?

Answer 1

Вы должны изменить state.main++ на state.current++

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

Answer 2

Проблема не в обработчике щелчка или действии, а в мутации. В вашей мутации INCREMENT_CURRENT_COUNT у вас есть это:

INCREMENT_CURRENT_COUNT (state) {
    state.main++
}

Пока в вашем штате есть только свойство под названием current.

Чтобы заставить это работать, измените:

state.main++

Кому:

state.current++