Vuex订阅和getter有什么区别？

Question

我有一个显示产品信息的 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 的值将是更新为 545 之前的 123 的旧产品数据。这可能是预期的行为，但它会扰乱 SSR 应用程序，它将 return 向浏览器发送旧数据 HTML.

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

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

现在商店总是在页面呈现之前填充新产品数据，SSR 也获得正确的更新数据。为什么这 better/differently 对计算属性有效？

Answer 1

computed() 是 Vue 内部的，当在其内部调用的任何 ref 更新时更新。

subscribe() 是特定于 Vuex 的，只要调用 any 突变就会被调用。

Vuex订阅和getter有什么区别？

What is the difference between Vuex subscribe and getter?

vue.js

vuex

vuejs3

vue-composition-api

vuex4