vuex突变后变量未更新答案

【问题标题】：Variable not updated after vuex mutationvuex突变后变量未更新
【发布时间】：2019-09-27 08:53:36
【问题描述】：

我正在创建一个设置页面，在那里我从 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 调试工具栏对其进行调试，但似乎一切正常。

【问题讨论】：

应该更新哪个值？在您的模板中只有 dailyCount，没有来自 vuex 的任何分配
@fabruex 我想更新dailyCount

标签： vue.js vuejs2 vuex

【解决方案1】：

您需要通过this.$store.state 或this.$store.getters 从 vuex 获取存储状态并注入到 Vue 组件。

例如：

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

【讨论】：