Question

我有一个购物篮，当我从一个应用程序中选择“添加到购物篮”时，我希望该购物篮可以重新加载。当添加到购物篮时，我将此商品发布到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>

<script>
import BasketItem from './BasketItem.vue';
import { eventBus } from '../main.js';

export default {
  name: 'basket',
  data(){
    return {
      items: [],
      total: 0
    }
  },
  components: {
    'basket-item': BasketItem
  },
  mounted(){
    fetch('http://localhost:3000/api/basket')
    .then(res => res.json())
    .then(data => this.items = data)
    .then(items => this.calcTotal(items))

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

我实质上是想像在React中那样做一个setState，但是直到刷新页面后篮子才会更新。

反正我可以在Vue中执行此操作而无需使用套接字吗？

谢谢

Answer 1

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

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（https://vuex.vuejs.org/guide/state.html）进行应用程序的状态管理：这有点复杂，但可以更好地设计应用程序。

如何强制将一个Vue组件从另一个组件重新渲染

1 个答案: