在 Nuxt 中没有页面刷新，更新的值不会改变

Question

我刚开始学习 Vue & Nuxt。所以我有一个页面，我可以在其中获取所有订单详细信息并更新订单状态。 UI 中显示的订单状态未异步更新。我怎样才能在这里实现反应？

我需要异步更新这里的值Current Status : <b>{{ order_details.status.state }}</b>。

模板

<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        Current Status : <b>{{ order_details.status.state }}</b>
      </v-col>
    </v-row>
  </v-container>
</template>
<template>
  <v-form>
    <v-container>
      <v-row>
        <v-col cols="12">
          <div class="d-flex align-center justify-end">
            <v-btn
              color="primary"
              class="text-subtitle-2 font-weight-medium"
              @click="updateOrder"
              >Update</v-btn
            >
          </div>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

脚本

export default {
  async fetch({ store, params }) {
    await store.dispatch("merchant/fetchOrderDetails", {
      id: params.id
    });
    await store.dispatch("fetchMerchants");
    await store.dispatch("fetchAllStatus");
  },
  data() {
    return {
      sortTypes: ["Date", "Distance"],
      selectedSort: "Distance",
      statusId: "",
    };
  },
  computed: {
    ...mapState({
      merchants: "merchants",
      statusList: "statusList"
    }),

    ...mapState("merchant", {
      order_details: "orderDetails"
    }),

  },

  methods: {
    async updateOrder() {
      await this.$axios
        .$patch(
          `/admin-portal/orders/${this.$route.params.id}`,
          {
            statusId: this.statusId
          }
        )
    },
  }
};

商店

export const state = () => ({
  orderDetails: {}
});

export const mutations = {
  SET_ORDER_DETAILS(state, orderDetails) {
    state.orderDetails = orderDetails;
  }
};

export const actions = {
  async fetchOrderDetails({ commit }, { id }) {
    const orderDetails = await this.$axios.$get(
      `/pharmaceutical/admin-portal/orders/${id}`
    );
    commit("SET_ORDER_DETAILS", orderDetails);
  }
};

Answer 1

你已经自己做了很多。您需要添加一些小东西。这是一个代码示例，可以帮助您修补您的东西并更新 vuex。

<template>
  ...
  <v-btn @click="updateOrderInsideVuex">
    Update
  </v-btn>
  ...
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions('merchant', ['updateOrder']),
    
    async updateOrderInsideVuex() {
      this.updateOrder({ paramsId: this.$route.params.id, statusId: this.statusId })
    }
  }
}
</script>

在你的 vuex 商店（模块）中。

const actions = {
  async updateOrder({ commit }, { paramsId, statusId }) {
    const responseFromBackend = await this.$axios.$patch(`/admin-portal/orders/${paramsId}`, { statusId })
    // remember to populate the vuex store with your result from the backend
    // or make another call to fetch the current state of the API
    commit('SET_ORDER_DETAILS_AFTER_PATCH', responseFromBackend)
  },

当然，你还需要写 SET_ORDER_DETAILS_AFTER_PATCH，一个典型的突变，但我想这也有点取决于你的实际数据。

在 Nuxt 中没有页面刷新，更新的值不会改变

Updated value not change without page refresh in Nuxt

vue.js

vuex

nuxt.js