我有一个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时,我的组件会更新.
我错过了什么?