Почему геттер во Vuex при изменении не обновляет компонент?

Question

[pegas]

Почему геттеры во Vuex при изменении не обновляют компонент? Ведь всё реактивно.
store.js

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

Vue.use(Vuex)


const store = new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        doneTodos (state) {
            return state.count + 5;
        }
    },
    mutations: {
        increment (state, { a }) {
            state.count = a;
        }
    }
});

setTimeout(() => {
    store.commit('increment', { a: 4 });
}, 2000);

export default store;

<template>
	<div>
		<div>{{ doneTodos }}</div>
	</div>
</template>

<script>
	import { mapState, mapGetters } from 'vuex'

	export default {
	  data () {
			return {
				text: 'lorem...',
				is: false,
				y: '',
				m: ''
			}
		},
		computed: {
			...mapState([
				'count',
			]),
			...mapGetters([
				'doneTodos'
			])
		}
	}
</script>

Answer 1

[0xD34F]

А с чего вы взяли, что обновление не выполняется? Может, проблема не в геттерах, а в вас - это вы чего-то не понимаете, или куда-то не туда смотрите?

Расскажите, что вы ожидаете увидеть, и что реально видите. А то в показанном вами коде никаких проблем, связанных с обновлением, разглядеть не удаётся.

Comments

[pegas]

Я пытаюсь увидеть в шаблоне {{ doneTodos }} текущее состояние хранилища. После вызова

setTimeout(() => {
    store.commit('increment', { a: 4 });
}, 2000);

оно изменилось, но в шаблоне компонента ничего не поменялось.

Действовал по инструкции

[0xD34F]

Артём, поверить на слово я вам не могу, уж извините. Докажите свои слова соответствующим примером в песочнице.

[pegas]

Пасибо, сейчас всё из файла store.js явно перенёс в файл где лежит корневой компонент, всё заработало!
Видимо вебпак не могу настроить.
Тут либо импорт
import store from '../store/store.js'
Либо экспорт
export default store;
Надо поправить.