Переменная не обновляется после мутации vuex

Question

Я создаю страницу настроек, где я извлекаю некоторые данные из API и использую Vuex для обработки мутаций.

Я вижу, что Vuex завершается правильно, но значение для моей переменной dailyCountне обновляется во внешнем интерфейсе.

Это мой компонент настроек:

<template>
    <div>
        <div class="row col">
            <h1>Settings</h1>
        </div>

        <div class="row col">
            <div class="well">
                <form class="form-inline">
                    <input type="number" v-model="dailyCount" />
                    {{ dailyCount }}
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'settings',
        data () {
            return {
                dailyCount: 500
            };
        },
        created () {
            this.$store.dispatch('settings/fetchSetting');
        },
        computed: {
            isLoading() {
                return this.$store.getters['user/isLoading'];
            },
            hasError() {
                return this.$store.getters['user/hasError'];
            },
            error() {
                return this.$store.getters['user/error'];
            },
        },
    }
</script>

Я делаю мутации здесь:

import SettingsAPI from '../api/settings';

export default {
    namespaced: true,
    state: {
        isLoading: false,
        error: null,
        settings: null,
    },
    getters: {
        isLoading (state) {
            return state.isLoading;
        },
        hasError (state) {
            return state.error !== null;
        },
        error (state) {
            return state.error;
        },
        user (state) {
            return state.user;
        },
    },
    mutations: {
        ['FETCHING_SETTINGS'](state) {
            state.isLoading = true;
            state.error = null;
            state.settings = null;
        },
        ['FETCHING_SETTINGS_SUCCESS'](state, settings) {
            state.isLoading = false;
            state.error = null;
            state.settings = settings;
        },
        ['FETCHING_SETTINGS_ERROR'](state, error) {
            state.isLoading = false;
            state.error = error;
            state.settings = null;
        },
    },
    actions: {
        fetchSetting ({commit}) {
            commit('FETCHING_SETTINGS');
            return SettingsAPI.get()
                .then(res => {commit('FETCHING_SETTINGS_SUCCESS', res.data);})
                .catch(err => commit('FETCHING_SETTINGS_ERROR', err));
        },
    },
}

И здесь выполняется вызов на сервер(api/settings.js - он импортирован в файл мутаций):

import axios from 'axios';

export default {
    get() {
        return axios.get('/user');
    },
}

Вы видите, что я делаю не так?Я пытаюсь отладить его с помощью панели инструментов отладки Vuejs, но, похоже, все работает нормально.

Answer 1

Вам нужно получить состояние хранилища из vuex и внедрить в компонент Vue, либо this.$store.state или this.$store.getters.

Например:

<script>
    export default {
        name: 'settings',
        data () {
            return {
                dailyCount: 500
            };
        },
        created () {
            this.$store.dispatch('settings/fetchSetting');
        },
        computed: {
            isLoading() {
                return this.$store.getters['user/isLoading'];
            },
            hasError() {
                return this.$store.getters['user/hasError'];
            },
            error() {
                return this.$store.getters['user/error'];
            },
            settings() {
              return this.$store.state.settings
            }
        },
        watch: {
          settings () {
            this.dailyCount = this.settings.dailyCount
          }
        }
    }
</script>