Vuex - 모듈 상태에 따라 계산된 속성이 디스패치 시 업데이트되지 않는가?

Vuex - 모듈 상태에 따라 계산된 속성이 디스패치 시 업데이트되지 않는가?

나는 Vuex에 대한 모듈 설명서를 살펴보고 있으며, 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 }
})

앱/스토어/모듈/카운터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/구성 요소/테스트.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()방법, 위와 같은 경우 내가 기대할 수 있는 것이지만 실제로 일어나는 일은 아무것도 아니다.

그러니 오류도 없고countvue 구성 요소 내의 값은 0으로 유지된다.

내가 여기서 뭘 잘못하고 있는지 알기나 해?

너는 변해야 한다.state.main++로state.current++

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

문제는 클릭 핸들러나 동작이 아니라 돌연변이에 있다.당신의 돌연변이에INCREMENT_CURRENT_COUNT다음과 같이 하십시오.

INCREMENT_CURRENT_COUNT (state) {
    state.main++
}

당신의 주(州)는 단지 '라 불리는' 부동산만 가지고 있는 반면current.

작동하려면 다음을 변경하십시오.

state.main++

받는 사람:

state.current++

참조URL: https://stackoverflow.com/questions/53374525/vuex-computed-property-based-on-a-modules-state-does-not-update-on-dispatch