Почему состояние не обновляется в вычисляемом?

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')
        }
    }
 })

используйте метод действия с помощью этого. $ Store.dispatch ('увеличить'), чтобы увеличить счетчик и наоборот, чтобы уменьшить

Answer 2

Если вы попытаетесь console.log(store), он вернет undefined .
Правильный способ доступа к магазину - использовать this.$store (должен быть компонентом).

Как упомянуто в документе:

При предоставлении опции хранилища корневому экземпляру хранилище будет внедрено в все дочерние компоненты корня и будет доступен на них как this. $ store .

Следовательно, ваш обновленный код должен быть:

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