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

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

您应该为 $route 添加 watch，以便在页面之间导航时对 id 更改做出反应。但在这种情况下，currentItem return 有可能为空，因为您的请求将在 监视处理程序已调用 后结束。

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

第二个是使用 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 组件中存储项目。

很抱歉post。

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

How to display loaded data after page refresh in vue?

javascript

vue.js

vue-resource