Javascript 如何从另一个Vue组件强制重新加载一个Vue组件

我有一个购物篮，当我从一个应用程序中选择“添加到购物篮”时，我想让购物篮重新加载。当添加到篮子中时，我将此项目发布到api。篮子从这个api获取数据，并在篮子组件中呈现数据

我正在使用EventBus通知篮组件已添加了新项，但是在我的

$on

函数中，

$forceUpdate（）

或发出另一个获取请求都不会使用新项重新呈现组件

这在我的项目组件中：

methods: {
submit(e){
  e.preventDefault()
  let data = this.createBasketObject(this.experience)
  fetch('http://localhost:3000/api/basket', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json'}
  })
  .then( eventBus.$emit('basket-updated', true))
}

这是我的篮子里的一部分：

<template lang="html">
  <div class="">
    <h3>Basket</h3>
    <basket-item
      v-for="item in items"
      :key="item._id"
      :item="item"
    />
    <p>Total: £{{ total}}</p>
  </div>

篮子
总数：{Total}

从“./BasketItem.vue”导入BasketItem；
从“../main.js”导入{eventBus}；
导出默认值{
名称：“篮子”，
数据（）{
返回{
项目：[]，
总数：0
}
},
组成部分：{
“篮子项目”：篮子项目
},
安装的（）{
取（'http://localhost:3000/api/basket')
.then（res=>res.json（））
.然后（data=>this.items=data）
.then（items=>this.calcTotal（items））
eventBus.$on（'basket-updated'，（数据）=>{
如果（数据）{
这是。$forceUpdate（）
}
})
}

我基本上是在尝试像React中那样的设置状态，但是在刷新页面之前，篮框不会更新

我是否可以在Vue中不使用套接字之类的东西来执行此操作

---

谢谢

我认为如果您需要“与服务器的往返（将新项目发送到服务器，一些计算，在购物车更新后返回前端）”，您需要在添加的新项目上重新加载购物篮项目。 因此：将篮子负载放在一个单独的方法中，从mounted调用它，然后再次在basket updated事件中调用它： 这是最简短的回答：

LoadBasket() {
 fetch('http://localhost:3000/api/basket')
    .then(res => res.json())
    .then(data => this.items = data)
    .then(items => this.calcTotal(items));
}

mounted(){
  //The first time:
  this.LoadBasket();

  eventBus.$on('basket-updated', (data) => {
      if(data){
         //on basket updated
          this.LoadBasket();
      }
    });
}

请记住，数据是一个“反应”属性：如果它发生更改，则表示也将更新（如果需要，将tnx转换为VueJS中使用的虚拟dom）：无需调用“刷新UI”方法

顺便说一下，如果只需要将刚创建的项目添加到项目列表中，则只需将其推送到数组中：

this.Items.push(newItem);

---

PS：我建议您在Vuex（）上查看应用程序的状态管理：它稍微复杂一点，但允许更好地设计应用程序。

我认为，如果您需要与服务器的往返，您需要在添加的新项目上重新加载篮项目（将新项目发送到服务器，一些Calc，返回到前端，并更新购物车）“”。 因此：将篮子负载放在一个单独的方法中，从mounted调用它，然后再次在basket updated事件中调用它： 这是最简短的回答：

LoadBasket() {
 fetch('http://localhost:3000/api/basket')
    .then(res => res.json())
    .then(data => this.items = data)
    .then(items => this.calcTotal(items));
}

mounted(){
  //The first time:
  this.LoadBasket();

  eventBus.$on('basket-updated', (data) => {
      if(data){
         //on basket updated
          this.LoadBasket();
      }
    });
}

请记住，数据是一个“反应”属性：如果它发生更改，则表示也将更新（如果需要，将tnx转换为VueJS中使用的虚拟dom）：无需调用“刷新UI”方法

顺便说一下，如果只需要将刚创建的项目添加到项目列表中，则只需将其推送到数组中：

this.Items.push(newItem);

---

PS：我建议您看看Vuex（）对于应用程序的状态管理：它稍微复杂一点，但允许对应用程序进行更好的设计。

谢谢。我尝试了类似loadbasket的功能，但在加载页面时没有反应。我一次只添加一个项目，因此传递该项目并将其推送到项目数据中。谢谢。我尝试了类似loadbasket的功能，但在加载页面时没有反应。我一次只添加一个项目，尽管如此，将该项目传递并将其推入项目数据工作。