Variable not updated after vuex mutation

Question

I am creating a settings page, where I fetch some data from the API and I am using Vuex to handle mutations.

I can see that the Vuex completes properly, but value for my dailyCount variable doesn't update in frontend.

This is my Settings component:

<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>

I do mutations here:

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));
        },
    },
}

And call to a server is done here (api/settings.js - it is imported in mutation file):

import axios from 'axios';

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

Can you see what am I doing wrong? I am trying to debug it using Vuejs debug toolbar, but all seems to work fine.

Which value should be updated? In your template there's only dailyCount, without any assignment from vuex — Fab

ittus ittus · Accepted Answer · 2019-05-10T01:22:40

You need to get store state from vuex and inject to Vue component, either by this.$store.state or this.$store.getters.

For example:

<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>

Variable not updated after vuex mutation

1 Answers