Nuxt Composition API, updating 'state', not reflected on UI Template

Question

I had a Nuxt.js application working with the options API. And with the new Nuxt3 coming out, I was trying to migrate things over to the supposedly 'better' alternative. So far i've had nothing but challenges, perhaps that's my lack of knowledge.

I'm building a basic E-Commerce platform with a component of

# products/_id.vue
<template>
  <div>
    {{ product }}
  </div>
</template>
<script>
import {
  defineComponent,
  useFetch,
  useStore,
  useRoute,
  ssrRef, reactive, watch
} from '@nuxtjs/composition-api'

export default defineComponent({
  setup () {
    const store = useStore()
    const route = useRoute()
    const loading = ref(false)

    // LOAD PRODUCT FROM VUEX STORE IF ALREADY LOADED
    const product = reactive(store.getters['products/loaded'](route.value.params.id))

    // GET PAGE CONTENT
    const { fetch } = useFetch(async () => {
      loading.value = true
      await store.dispatch('products/getOne', route.value.params.id)
      loading.value = false
    })

    // WATCH, if a use navigates to another product, we need to watch for changes to reload
    watch(route, () => {
      if (route.value.params.id) {
        fetch()
      }
    })

    return {
      loading
      product
    }
  }
})
</script>

One thing I need to note, is, if the product gets a comment/rating, I want the UI to update with the products star rating, thus needing more reactivity.

I continue to get an undefined product var

Inside my VueX store I have my getters

loaded: state => (id) => {
    try {
      if (id) {
        return state.loaded[id]
      }
      return state.loaded
    } catch {
      return {}
    }
  }

Looking for directions on how to get this to work, improve any of the code i've currently setup.

Answer 1

If you want to maintain reactive referece to your getter, then you have to create a computed property.

So, what you return from your setup function is

product: computed(() => getters['products/loaded'](route.value.params.id))

This will make sure that whenever the getter updates, your component will receive that update.

Also, if the product already exists, you should bail out of the fetch function. So that you do not make the extra API call.

And, finally, if there is an error, you could redirect to a 404 error page.

All in all, your setup function could look something like this

 setup() {
  const route = useRoute();
  const { error } = useContext();
  const { getters, dispatch } = useStore();

  const loading = ref(false);

  const alreadyExistingProduct = getters['products/loaded'](route.value.params.id);

  const { fetch } = useFetch(async () => {
    // NEW: bail if we already have the product
    if (alreadyExistingProduct) return;

    try {
      loading.value = true;
      await dispatch('products/getOne', route.value.params.id);
    } catch {
      // NEW: redirect to error page if product could not be loaded
      error({ statusCode: 404 });
    } finally {
      loading.value = false;
    }
  });

  watch(route, () => {
    if (route.value.params.id) {
      fetch();
    }
  });

  return {
    loading,
    // NEW: computed property to maintain reactive reference to getter
    product: computed(() => getters['products/loaded'](route.value.params.id)),
  };
},

You will probably also run into this harmless issue FYI.