这可能是一个愚蠢的问题，但是每当我向productsList提交一个表单以发布新产品时，UI并不会立即呈现它，只有在我重新加载页面之后才会呈现。我正在发布数据并从firebase获取
ProductList.vue

<template>
  <div class="product-list">
    <NewItemForm></NewItemForm>
    <ul>
      <ProductListItem
        v-for="product in productsList"
        v-bind:key="product.product.id"
        :title="product.product.title"
        :price="+product.product.price"
        :id="product.product.id"
      />
    </ul>
  </div>
</template>

<script>
import ProductListItem from "./ProductListItem.vue";
import NewItemForm from "./NewItemForm.vue";
import { mapActions, mapGetters } from "vuex";

export default {
  name: "ProductList",
  components: {
    ProductListItem,
    NewItemForm,
  },

  methods: {
    ...mapActions(["getProducts"]),
  },

  computed: { ...mapGetters(["productsList"]) },

  created() {
    this.getProducts();
  },
};
</script>

store.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    products: [],
  },

  mutations: {
    addNewProduct: (state, product) => {
      product.id = product.name;
      state.products.unshift(product);
    },
    setProducts: (state, products) => {
      for (const name in products) {
        products[name].product.id = name;
        state.products = [...state.products, products[name]];
      }
    },
  },

  getters: {
    productsList: (state) => state.products,
  },

  actions: {
    async addNewProduct({ commit }, product) {
      const response = await axios.post(
        "https://vue-s-261e8-default-rtdb.firebaseio.com/products.json",
        product
      );
      commit("addNewProduct", response.data);
    },

    async getProducts({ commit }) {
      try {
        const response = await axios.get(
          "https://vue-s-261e8-default-rtdb.firebaseio.com/products.json"
        );
        commit("setProducts", response.data);
      } catch (err) {
        console.log(err);
      }
    },
  },
});

NewItemForm.vue

<template>
  <div>
    <form class="form">
      <label for="name">Product name</label>
      <input type="text" name="name" v-model="product.title" />
      <label for="description">Product description</label>
      <input type="text" name="description" v-model="product.description" />
      <label for="price">Product price</label>
      <input type="text" name="price" v-model="product.price" />
    </form>
    <button class="button" type="submit" v-on:click.prevent="onSubmit">
      Add new item
    </button>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "NewItemForm",

  data() {
    return {
      product: {
        title: "",
        description: "",
        price: "",
      },
    };
  },

  methods: {
    ...mapActions(["addNewProduct"]),
    onSubmit() {
      this.addNewProduct({
        product: this.product,
      });
    },
  },
};
</script>

我试着设置一个观察者，但这只会引入一个无限循环。