javascript - 在向另一个组件发出 http 请求时保持 react 性

Question

我有这个应用程序结构

<header-bar></header-bar>    

<bag :bag="bag"></bag>

<!--Main Section-->
<section class="MainSection">

    <div class="MainSection__wrap">
        <router-view 
            is="view" 
            transition="fade" 
            transition-mode="out-in"
            keep-alive
        >
        </router-view>
    </div>

</section>

如您所见，有 2 个组件和路由器 View 。

路由器 View 包含从 API 列出的产品，这些产品可以添加到包组件中。

在我的产品 View (路由器 View 的一部分)中，我有将项目添加到包中的方法 - 基本上是向服务器发出 POST HTTP 请求

addToBag() {
   productService.add(this.item)
      .then(item => {
          console.log('sucess !)
      })
}

这个工作正常，但只有在重新加载后，我才能看到包里的元素。

调度事件是可行的，但组件层次结构不允许我使用它。

Answer 1

您正在服务器端添加项目。您还需要将该项目添加到 vm.bag 数据中。您可能想使用Vuex。基本上，您需要的是从您的 bag 组件(您已经拥有)和从您的“productService”或“addToBag”方法访问相同的“bag”。

因此，在声明 bag 数据的组件中，您应该更改:

// from
    /* inside component */
    data: function() {
        return {
            bag: []
        }
    }


// to
var state = {
    bag: []
}

    /* inside component */
    data: function() {
        return {
            bag: state.bag
        }
    }

然后，您在 addToBag 方法中使用相同的 bag 数组:

addToBag() {
   productService.add(this.item)
      .then(item => {
          state.bag.push(item)
      })
}