我有一个vue组件,无法从服务调用填充的计算(computed)属性中更新.

Feed.vue

<template>
    <div class="animated fadeIn">
        <h1 v-if="!loading">Stats for {{ feed.name}}</h1>      
        <h2 v-if="loading">loading {{ feedID }}</h2> 
    </div>
</template>
<script>
    export default {
        data: () => {
            return {
                feedID: false
            }
        },
        computed: {
            feed(){
                return this.$store.state.feed.currentFeed
            },
            loading(){
                return this.$store.state.feed.status.loading;
            }
        },
        created: function(){    
            this.feedID = this.$route.params.id;
            var fid = this.$route.params.id;
            const { dispatch } = this.$store;
            dispatch('feed/getFeed', {fid});
        }
    }
</script>

从feed模块发送'feed/getFeed'...

feed.module.js

import { feedStatsService } from '../_services';
import { router } from '../_helpers';

export const feed = {
    namespaced: true,
    actions: {
        getFeed({ dispatch, commit }, { fid }) {
            commit('FeedRequest', {fid});
            feedStatsService.getFeed(fid)
                .then(
                    feed => {
                        commit('FeedSuccess', feed);
                    },
                    error => {
                        commit('FeedFailure', error);
                        dispatch('alert/error', error, { root: true });
                    }
                )
        }
    },
    mutations: {
        FeedRequest(state, feed) {
            state.status = {loading: true};
            state.currentFeed = feed;
        },
        FeedSuccess(state, feed) {
            state.currentFeed = feed;
            state.status = {loading: false};
        },
        FeedFailure(state) {
            state.status = {};
            state.feed = null;
        }
    }
}

饲料站服务.getFeed调用该服务,该服务只运行一次获取并返回结果.然后调用commit('FeedSuccess',feed),它运行变异,设置状态.currentFeed=feed,并设置状态.地位加载到false.

我可以看出它是存储的,因为该对象显示在Vue开发工具中.状态喂养currentFeed是服务的结果.但是,我的组件没有改变以反映这一点.开发工具中也有一个负载不足.在开发工具中手动提交feed/feedSuccess时,我的组件会更新.

我错过了什么?

Vue Dev tools

推荐答案

组件data属性需要初始化,store 状态也需要初始化.如果Vue不知道初始数据,则无法对更改做出react .

你似乎错过了一些东西,比如...

state: {
  status: { loading: true },
  currentFeed: {}
}

另一个 Select 是使用Vue.set.见https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules...

由于Vue会使Vuexstore 的状态变为被动状态,因此当我们改变状态时,观察状态的Vue组件将自动更新.这也意味着VuexMutations 在使用普通Vue时也会受到同样的react 性警告

Vue.js相关问答推荐

在Nuxt项目中混合Scrolltrigger与Lenis

Vuejs 通过数据键迭代复杂对象

有没有办法在 Quasar 中为明暗模式创建我自己的 colored颜色 ?

如何通过 setup() 发出多个参数?

两个div元素之间的vue2过渡

已分配计算(computed)属性,但它没有设置器

从组件的 内的组件调用方法

使用 VueJS 在 v-for 中转换

如何使用 vuex 删除项目?

Nuxt:显示静态文件夹中的本map像

vuejs挂载生命周期未触发

我在 Nuxt 2.14.0 中运行的是什么版本的 Vue?

将 VueJS 数据属性重置为初始值

laravel vuejs/axios put request Formdata 为空

如何设置 :id 前缀字符串?

使用 vuejs 动态设置 id 标签

Axios 请求拦截器在我的 vue 应用程序中不起作用

Vuetify 过渡:如何设置过渡速度

如何使用 Vuetify 验证复选框组

Vuetify 离线文档