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>

基本上，我要做的就是单击触发current方法的组件中的按钮时，增加Counter模块中的add()值，这可能是我可能要做的鉴于以上所述，但实际上不会发生什么。

因此没有错误，并且vue组件中的count值保持为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++

Vuex-基于模块状态的计算属性不会在派发时更新吗？

2 个答案: