Guide to Updating Store State with API Data

Question

Guide to Updating Store State with API Data

My goal is to update my component state with data retrieved from an API using a getter in the store.

Within the mounted() lifecycle hook, I call the getProducts() getter which is defined as:

export const getters = {
  async getProducts() {
    axios.get('/api/products')
      .then(res => {
        var data = res.data
        commit('setProducts', data)
      })
      .catch(err => console.log(err));
  }
}

The getProducts() getter attempts to execute a mutation named setProducts(), which is defined as follows:

export const mutations = {
  setProducts(state, data) {
    state.products = data
  }
}

However, upon running this code, I encounter the error ReferenceError: commit is not defined in the console.

The issue seems to be related to triggering the mutation, and despite extensive research over two days, I have been unable to find a solution.

I attempted replacing commit('setProducts', data) with: this.setProducts(data) setProducts(data)

Unfortunately, all of these attempts resulted in the error "TypeError: Cannot read properties of undefined (reading 'setProducts')".

javascript vue.js nuxt.js store

Answer 1

Answer №1

In a Vue component, if your function getProduct is defined, you can access the store by using

this.$store.commit('setProducts', data)

If the function is outside of a Vue component, import the store from an external JavaScript file:

import store from './fileWhereIsYourStore.js'

store.commit('setProducts', data)

If your getters export contains the definition of your store's getters, importing the store first is a solution, but it's not recommended to make commits in getters. Find a better approach.

EDIT: To address a comment, here's an example implementation:

// Store module 
export default {
  state: {
    products: []
  },

  mutations: {
    SET_PRODUCTS(state, data) {
      state.products = data
    }
  },

  actions: {
    async fetchProducts(store) {
      await axios.get('/api/products')
        .then(res => {
          var data = res.data
          store.commit('SET_PRODUCTS', data)
        })
        .catch(err => console.log(err));
    }
  }
}

Now, in each component, you can fetch and populate the store like so:

// Random Vue Component
<template>
</template>

<script>
export default {
 async mounted() {
   await this.$store.dispatch('fetchProducts')

   // Access products like this
   console.log(this.$store.state.products)
 }
}
</script>

This code should work properly, although I haven't tested it.

Answer 2

In a Vue component, if your function getProduct is defined, you can access the store by using

this.$store.commit('setProducts', data)

If the function is outside of a Vue component, import the store from an external JavaScript file:

import store from './fileWhereIsYourStore.js'

store.commit('setProducts', data)

If your getters export contains the definition of your store's getters, importing the store first is a solution, but it's not recommended to make commits in getters. Find a better approach.

EDIT: To address a comment, here's an example implementation:

// Store module 
export default {
  state: {
    products: []
  },

  mutations: {
    SET_PRODUCTS(state, data) {
      state.products = data
    }
  },

  actions: {
    async fetchProducts(store) {
      await axios.get('/api/products')
        .then(res => {
          var data = res.data
          store.commit('SET_PRODUCTS', data)
        })
        .catch(err => console.log(err));
    }
  }
}

Now, in each component, you can fetch and populate the store like so:

// Random Vue Component
<template>
</template>

<script>
export default {
 async mounted() {
   await this.$store.dispatch('fetchProducts')

   // Access products like this
   console.log(this.$store.state.products)
 }
}
</script>

This code should work properly, although I haven't tested it.

Answer 3

Answer №2

Actions are the only ones that have commit in their context, as shown here.
Getters do not have access to commit.

Alternatively, you can utilize mapActions (or

import { mapActions } from 'vuex'

) instead of using this.$store.dispatch (it's just a matter of preference, no real difference in the end).

Following Julien's suggestion to refactor your code and use actions is a recommended approach when working with Vuex.

Getters are typically used for manipulating state with specific structures, such as sorting alphabetically. For general state access, consider using the regular state or the mapState helper.

Answer 4

Actions are the only ones that have commit in their context, as shown here.
Getters do not have access to commit.

Alternatively, you can utilize mapActions (or

import { mapActions } from 'vuex'

) instead of using this.$store.dispatch (it's just a matter of preference, no real difference in the end).

Following Julien's suggestion to refactor your code and use actions is a recommended approach when working with Vuex.

Getters are typically used for manipulating state with specific structures, such as sorting alphabetically. For general state access, consider using the regular state or the mapState helper.

Guide to Updating Store State with API Data

Answer №1

Answer №2

Similar questions

Trapped in a Continuous Observing Loop with MdSnackBar in Angular Material within Angular 2

Issues arise when attempting to make a SOAP request in NodeJS, as opposed to PHP where it functions seamlessly

Unique style pattern for parent links with both nested and non-nested elements

Switch the following line utilizing a regular expression

I'm experiencing some issues with my scene in ThreeJS - the HDR background isn't displaying, and my cube

Error: Authentication Error - Headers have already been sent to the client and cannot be modified

What is the best way to automatically build a Single Page Application when deploying to Heroku?

Having trouble rendering a model using OBJLoader in React Three Fiber

Implement Material-UI's built-in validation for form submission

Error message: "Reactjs - TypeError: The property 'map' cannot be read as it is undefined in the table"

Encountering difficulties when trying to display a nested object with two levels of depth using

NodeJS instructs open(html) to execute first before any other code is executed

`Storing modified PDF containing interactive form elements using integrated Chrome viewer and transferring it to a remote server`

Parsing JavaScript JSON using PHP's json_decode method is a powerful feature

Having trouble updating a MongoDB array through a RESTful API PUT request

react-intersection-observer is specifically designed to function with the final elements

Formatting dates for the bootstrap datepicker

Is there a way to determine if two distinct selectors are targeting the same element on a webpage?

Alert: A notification appears when executing Karma on grunt stating that 'The API interface has been updated'

Create a custom hook that encapsulates the useQuery function from tRPC and provides accurate TypeScript typings