vuejs如何实时获取数据

Question

这是我在 vue 中的第一个项目。我正在从服务器获取购物车数据。我想从 vue 中更改数量。当我单击更改数量（即向上箭头和向下箭头）时，更改会反映在服务器数据库中。但在 UI 中，我必须重新加载页面才能看到我不想要的更改。

我希望在单击按钮时无需重新加载即可查看更改。我想在不点击任何按钮的情况下运行TotalCartPrice 方法。我的意思是当我打开购物车时，它应该会自动运行。怎么了？

cart.vue

<template>
    <CartItem v-for="cart in carts" :key="cart.id" :carts="cart" />
</template>
<script>
import CartItem from "../components/cart/cartItem";
export default {
  name: "CartPage",
  components: {
    CartItem
  },
  computed: {
    ...mapGetters(["carts"])
  },
  created() {},
  methods: {
    TotalCartPrice() {
      var total = 0;
      for (var i = 0; i < this.carts.length; i++) {
        total += this.carts[i].product.price * this.carts[i].quantity;
      }
      return total;
    }
  }
};

CartItem.vue

<template>
  <div>
     <h5>${{ carts.product.price }}</h5>
     <div class="product_count">
        <input
          disabled
          name="qty"
          maxlength="12"
          :value="carts.quantity"
          class="input-text qty"
        />
        <button
          @click="addProduct()"
          class="increase items-count"
          type="button"
        >
          <i class="lnr lnr-chevron-up"></i>
        </button>
        <button
          @click="removeProduct()"
          class="reduced items-count"
          type="button"
        >
          <i class="lnr lnr-chevron-down"></i>
        </button>
      </div>
</div>
</template>
<script>
export default {
  name: "cartItem",
  props: {
    carts: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      cartDetail: {
        product: this.carts.product.id,
        quantity: null,
        customer: null,
        checkout: false
      }
    };
  },
  computed: {
    ...mapGetters(["authUser"])
  },
  methods: {
    ...mapActions(["addTocart"]),
    addProduct() {
      this.cartDetail.quantity = 1;
      this.cartDetail.customer = this.authUser.id;
      this.addTocart(this.cartDetail);
    },
    removeProduct() {
      this.cartDetail.quantity = -1;
      this.cartDetail.customer = this.authUser.id;
      this.addTocart(this.cartDetail)
    }
  }
};
</script>

Cart.js

const state = {
  carts: []
};
const getters = {
  carts: state => state.carts
};
const actions = {
  async addTocart({ commit }, data) {
    const JsonData = JSON.parse(JSON.stringify(data));
    const response = await axios.post("/api/v1/cart/view-set/", JsonData);
    return response;
  },
  async cart({ commit }, data) {
    if (data !== "null") {
      const response = await axios.get(`/api/v1/cart/cartdetial/${data}`);
      commit("setCarts", response.data);
      return response;
    }
  }
};
const mutations = {
  setCarts: (state, carts) => {
    state.carts = carts;
  }
};

export default {
  state,
  getters,
  actions,
  mutations
};

Answer 1

TotalCartPrice 应该是一个计算属性：

    TotalCartPrice: function() {
      var total = 0;
      for (var i = 0; i < this.carts.length; i++) {
        total += this.carts[i].product.price * this.carts[i].quantity;
      }
      return total;
    }

来自有关计算和方法之间区别的文档：

...计算属性根据其反应性依赖关系进行缓存。计算属性仅在其某些反应性依赖项发生更改时才会重新评估。这意味着只要消息没有改变，对 reversedMessage 计算属性的多次访问将立即返回先前计算的结果，而无需再次运行该函数。

这样，您的购物车价格将在this.carts 更新时更新。