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

您需要通过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>

vuex突变后变量未更新

1 个答案: