0

我有一个Product.vue显示产品信息的组件。每当ProductID路径中的 随存储在 中的数据发生变化时，它都会更新vuex。它是这样完成的：

setup() {
...
    // function to trigger loading product into vuex store state
        async function loadProduct() {
          try {
            await $store.dispatch('loadProduct', {ProductID: $route.params.ProductID})
          } catch (error) {
            console.log(error);
          }
        }
    
    // watch the route for changes to the ProductID param and run loadProduct() function above
      watch(() => $route.params.ProductID, async () => {
              if ($route.params.ProductID) {
                loadProduct();
              }
            },
            {
              deep: true,
              immediate: true
            }
        )
    // Get the product data using a getter
        const Product = computed(() => $store.getters.getProduct);
}

当我使用上面的代码并转到类似的路线localhost:8080/product/123时， 的值为const Product空，然后在一瞬间它将具有正确的产品数据。如果我再去另一条路线之类localhost:8080/product/545的， 的值const Product将是123更新之前的旧产品数据545。这可能是预期的行为，但它会扰乱 SSR 应用程序，这些应用程序会将旧数据作为 HTML 返回给浏览器。

然后我遇到了解决问题的vuex subscribe功能。但我不明白为什么或如何与computed吸气剂不同。这是代码所需的唯一更改：

setup() {
...
  const Product = ref();
  $store.subscribe((mutation, state) => {
  Product.value = state.productStore.product
  })
}

现在，商店总是在页面呈现之前填充新的产品数据，并且 SSR 也获得了正确的更新数据。为什么这对计算属性更好/不同？

4

1 回答 1

3

computed()是 Vue 内部的，并且在其中任何ref被调用的内容更新时都会更新。

subscribe()是特定于 Vuex 的，每当调用任何突变时都会被调用。

于 2021-06-07T11:59:10.030 回答