Question

我在vuex上奋斗了几个小时。这是我第一次使用它，即使我按照文档进行操作也无法正常工作，但是我真的无法弄清楚。

因此，我有第一个无法正常工作的vuex文档示例。我有一个count计算得出的值，该值返回了存储状态。

它显示在页面上。起始值为0，视图显示为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'）访问操作方法以增加计数，反之亦然

Answer 2

如果您尝试console.log(store)，它将返回 undefined 。
访问商店的正确方法是使用this.$store（应该是组件）。

As mentioned in the doc:

通过为根实例提供存储选项，存储将被注入到根的所有子组件中，并以 this。$ store 的形式在其上可用。

因此，您更新的代码应为：

methods: {
    increment () {
        this.$store.commit('increment')
    },
    decrement () {
        this.$store.commit('decrement')
    }
}

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

2 个答案: