javascript - 为什么状态不在计算中更新？

Question

我在 vuex 上苦苦挣扎了几个小时。 这是我第一次使用它，尽管我按照文档进行操作，但有些东西不起作用，但我真的想不通。

所以我有第一个不起作用的 vuex 文档示例。 我有一个返回存储状态的 count 计算值。

它显示在页面上。 起始值为 0， View 显示为 0。 但按下按钮不会改变显示。

如果我直接将商店以常量形式放入 App.js 中，则没问题。

我知道我错过了一些东西......

homeStore.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        },
        decrement (state) {
            state.count--
        }
    }
})

App.js

import store from '../store/homeStore'

new Vue({
    el: '#app',
    store,
    computed: {
        count () {
            return store.state.count
        },
    },
    methods: {
        increment () {
            store.commit('increment')
        },
        decrement () {
            store.commit('decrement')
        }
    }
})

Answer 1

利用 Vuex 存储操作

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: { count: 0 },
    mutations: {
        increment (state) {
            state.count++ 
        },
       decrement (state) {
           state.count-- 
       }
    },
    actions: {
        increase ({ commit }) {
            commit('increment')
        },
        decrease ({ commit }) {
            commit('decrement')
        }
    }
 })

使用 this.$store.dispatch('increase') 访问操作方法以增加计数，反之亦然以减少