Question

我有一个包含一些项目的组件，这些项目是使用get request方法从api加载的。当我单击一个项目时，我会使用动态路由{ path: '/:id', component: Item }重定向到它自己的页面。使用currentItem()方法可识别单击的项目：currentItem() { this.items.find(item => item.code === this.$route.params.id) }，其中item.code是我从api获得的属性。我的问题是，当我用当前项目刷新页面时，不再加载该页面。我尝试使用beforeCreate()在自己的组件中再加载一次项目。也许我可以根据项目使用watch来更改状态？

beforeCreate() {
    this.$http.get(url).then(response => {
          this.items = response.body;
    }
},
watch: {
    '$route' (to, from) {
      this.currentItem()
    }
  }

这里是demo。

Answer 1

在页面之间导航时，应为watch添加$route以对id的更改做出反应。但是在这种情况下，currentItem有可能返回null，因为您的请求将在监视处理程序已被调用后终止。

第一个解决方案是在items组件中监视Item集合，并在此监视处理程序中调用this.currentItem()。是的，您将必须像示例中那样将items加载到Item组件中。

第二种是使用computed属性currentItem代替方法（如果可能）：

computed: {
   currentItem() {
       return this.items.find(item => item.code === this.$route.params.id)
   }
}

这将是反应性的，您不再需要监视。但是请不要忘记默认设置this.items为空数组，以避免出现空错误。

第三个解决方案是结合第二个解决方案，即使用Vuex存储在所有组件之间共享项目集合并执行以下操作：

beforeCreate() {
    // you should check in this action that items already loaded earlier as well
    this.$store.dispatch('loadItems');
},
computed: {
   currentItem() {
       return this.items.find(item => item.code === this.$route.params.id)
   },
   items() {
       return this.$store.state.items
   }
}

商店：

state: {
   items: [],
   itemsLoaded: false,
}
actions: {
   loadItems({state, commit}) {
      // avoid unnecessary loading between navigations
      if (itemsLoaded) return
      Vue.http.get('some url').then(response => {
          commit('setItems', response.body);
          commit('itemsLoaded');
      }
   }
},
mutations: {
   setItems: (state, items) => state.items = items 
   itemsLoaded: (state) => state.itemsLoaded = true
}

例如，您无需将商品存储在Item和Items组件中。

对不起，很长的帖子。

在Vue中刷新页面后如何显示加载的数据？

1 个答案: