상태가 계산에서 업데이트되지 않는 이유는 무엇입니까?

상태가 계산에서 업데이트되지 않는 이유는 무엇입니까?

저는 vuex 때문에 몇 시간 동안 고생하고 있습니다.처음 사용하는 건데 설명서를 따르는데도 뭔가 작동이 안 되는데 정말 모르겠어요.

그래서 저는 작동하지 않는 vuex 문서의 첫 번째 예를 가지고 있습니다.나는 있습니다count저장 상태를 반환하는 계산된 값입니다.

그것은 페이지에 표시됩니다.시작 값은 0이고 보기에 0이 표시됩니다.하지만 버튼을 눌러도 화면이 바뀌지 않습니다.

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

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

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.store') - 카운트를 증분하거나 그 반대로 감소시킵니다.

만약 당신이 하려고 하면,console.log(store)정의되지 않은 상태로 반환됩니다.
상점에 액세스하는 올바른 방법은 사용하는 것입니다.this.$store(구성요소여야 함).

문서에 언급된 바와 같이:

루트 인스턴스에 저장소 옵션을 제공하면 루트의 모든 하위 구성 요소에 저장소가 주입되고 이 구성 요소에서 이와 같이 사용할 수 있습니다.$store.

따라서 업데이트된 코드는 다음과 같아야 합니다.

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

언급URL : https://stackoverflow.com/questions/55786896/why-the-state-doesnt-update-in-computed