I am attempting to utilize the fetch API method to initialize the store's state, but for some reason, it is not functioning properly

Question

I am attempting to utilize the fetch API method to initialize the store's state, but for some reason, it is not functioning properly

Within my store.js file, I have a state called user_data, with its initial method set to fetch_user_data:

export default new Vuex.Store({
  state: {
    user_data: util.fetch_user_data('username')
    ...
  }

located in the util.js file:

util.fetch_user_data = function(username){
   Lml_http('get', Api_urls.productconfig_common.user_data(username), null, response => {

    return response.data  // data is obtained here, as shown in the debugger.
  }, error => {

  })
}

However, when attempting to use the user_data from the state, it returns as undefined.

EDIT-1

I aim to utilize the fetch_util method in the store.js file for data retrieval and commit to the state.

EDIT-2

The code snippet for the lml_http function is provided below:

var lml_http = function (method, url, params, success_cb, error_cb, multipart_formdata=undefined) {

  var format_to_form_data = function(data){

    let formData = new FormData()
    for (let item in data) {
      formData.append(item, data[item])
    }
    return formData
  }

  var lowercase_method = method.toLowerCase()

  var formated_params = params

  var header_config = null

  if (multipart_formdata) {
    header_config = {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }

    formated_params = format_to_form_data(formated_params)
  }

  if(lowercase_method === "get") {

    formated_params = {params: formated_params}

    if (!header_config) {

      Axios.get(url, formated_params).then(response => {
        success_cb(response)
        return
      }).catch(response => {
        error_cb(response)
        return
      })
    } else {
      Axios.get(url, format_to_form_data(formated_params), header_config).then(response => {
        success_cb(response)
        return
      }).catch(response => {
        error_cb(response)
        return
      })

    }

    return
  }
  else {


    if(!header_config) {

      Axios[method](url, formated_params).then(response => {
        success_cb(response)
      }).catch(response => {
        error_cb(response)
      })
      return
    }else {
      Axios[method](url, formated_params, header_config).then(response => {
        success_cb(response)
      }).catch( response => {
        error_cb(response)
      })
      return
    }

  }

}

javascript vue.js vuex

Answer 1

Answer №1

To get the user data, you can create an action like this:

export default new Vuex.Store({
  state: {
    user_data: null
  },
  mutations: {
    setUserData(state, data) {
      state.user_data = data;
    }
  },
  actions: {
    fetchUserData({ commit }, username) {
      Lml_http(
        "get",
        Api_urls.productconfig_common.user_data(username),
        null,
        response => {
          commit("setUserData", response.data);
        },
        error => {}
      );
    }
  }
});

Next, you need to dispatch this action in the created() hook of the root Vue instance.

//main.js

new Vue({
  el: "#app",
  store,
  render: h => h(App),
  created() {
    this.$store.dispatch("fetchUserData", "username");
  }
});

`

Edit:

By default, Axios returns a Promise. Here's how you should handle Axios calls within lml_http:

var lml_http = function(
  method,
  url,
  params,
  success_cb,
  error_cb,
  multipart_formdata = undefined
) {
  // Function to format data to FormData
  var format_to_form_data = function(data) {
    let formData = new FormData();
    for (let item in data) {
      formData.append(item, data[item]);
    }
    return formData;
  };

  var lowercase_method = method.toLowerCase();

  var formated_params = params;

  var header_config = null;

  if (multipart_formdata) {
    header_config = {
      headers: {
        "Content-Type": "multipart/form-data"
      }
    };

    formated_params = format_to_form_data(formated_params);
  }

  if (lowercase_method === "get") {
    formated_params = { params: formated_params };

    if (!header_config) {
      return Axios.get(url, formated_params)
        .then(response => {
          success_cb(response);
        })
        .catch(response => {
          error_cb(response);
        });
    } else {
      return Axios.get(url, format_to_form_data(formated_params), header_config)
        .then(response => {
          success_cb(response);
        })
        .catch(response => {
          error_cb(response);
        });
    }
  } else {
    if (!header_config) {
      return Axios[method](url, formated_params)
        .then(response => {
          success_cb(response);
        })
        .catch(response => {
          error_cb(response);
        });
    } else {
      return Axios[method](url, formated_params, header_config)
        .then(response => {
          success_cb(response);
        })
        .catch(response => {
          error_cb(response);
        });
    }
  }
};

Don't forget to add a return statement in utils.js as shown below:

util.fetch_user_data = function(username){
   return Lml_http('get', Api_urls.productconfig_common.user_data(username), null, response => {

    return response.data  // Fetch and return the data
  }, error => {

  })
}

In your action fetchUserData, update it to:

fetchUserData({ commit }) {
    util.fetch_user_data('username').then((
      commit("setUserData", response.data);
    });
}

In main.js, simply dispatch the action without providing any payload:

//main.js

new Vue({
  el: "#app",
  store,
  render: h => h(App),
  created() {
    this.$store.dispatch("fetchUserData", "username");
  }
});

Answer 2

To get the user data, you can create an action like this:

export default new Vuex.Store({
  state: {
    user_data: null
  },
  mutations: {
    setUserData(state, data) {
      state.user_data = data;
    }
  },
  actions: {
    fetchUserData({ commit }, username) {
      Lml_http(
        "get",
        Api_urls.productconfig_common.user_data(username),
        null,
        response => {
          commit("setUserData", response.data);
        },
        error => {}
      );
    }
  }
});

Next, you need to dispatch this action in the created() hook of the root Vue instance.

//main.js

new Vue({
  el: "#app",
  store,
  render: h => h(App),
  created() {
    this.$store.dispatch("fetchUserData", "username");
  }
});

`

Edit:

By default, Axios returns a Promise. Here's how you should handle Axios calls within lml_http:

var lml_http = function(
  method,
  url,
  params,
  success_cb,
  error_cb,
  multipart_formdata = undefined
) {
  // Function to format data to FormData
  var format_to_form_data = function(data) {
    let formData = new FormData();
    for (let item in data) {
      formData.append(item, data[item]);
    }
    return formData;
  };

  var lowercase_method = method.toLowerCase();

  var formated_params = params;

  var header_config = null;

  if (multipart_formdata) {
    header_config = {
      headers: {
        "Content-Type": "multipart/form-data"
      }
    };

    formated_params = format_to_form_data(formated_params);
  }

  if (lowercase_method === "get") {
    formated_params = { params: formated_params };

    if (!header_config) {
      return Axios.get(url, formated_params)
        .then(response => {
          success_cb(response);
        })
        .catch(response => {
          error_cb(response);
        });
    } else {
      return Axios.get(url, format_to_form_data(formated_params), header_config)
        .then(response => {
          success_cb(response);
        })
        .catch(response => {
          error_cb(response);
        });
    }
  } else {
    if (!header_config) {
      return Axios[method](url, formated_params)
        .then(response => {
          success_cb(response);
        })
        .catch(response => {
          error_cb(response);
        });
    } else {
      return Axios[method](url, formated_params, header_config)
        .then(response => {
          success_cb(response);
        })
        .catch(response => {
          error_cb(response);
        });
    }
  }
};

Don't forget to add a return statement in utils.js as shown below:

util.fetch_user_data = function(username){
   return Lml_http('get', Api_urls.productconfig_common.user_data(username), null, response => {

    return response.data  // Fetch and return the data
  }, error => {

  })
}

In your action fetchUserData, update it to:

fetchUserData({ commit }) {
    util.fetch_user_data('username').then((
      commit("setUserData", response.data);
    });
}

In main.js, simply dispatch the action without providing any payload:

//main.js

new Vue({
  el: "#app",
  store,
  render: h => h(App),
  created() {
    this.$store.dispatch("fetchUserData", "username");
  }
});

Answer 3

Answer №2

Due to the asynchronous nature of the fetch api, it will generate a promise instead of directly providing the response data. One potential approach could be:

const dataStore = new Vuex.Store({
  state: {
  userData: null,
  ...
};

util.fetchUserData('username')
  .then(user => dataStore.userData = user);

export default dataStore;

Answer 4

Due to the asynchronous nature of the fetch api, it will generate a promise instead of directly providing the response data. One potential approach could be:

const dataStore = new Vuex.Store({
  state: {
  userData: null,
  ...
};

util.fetchUserData('username')
  .then(user => dataStore.userData = user);

export default dataStore;

I am attempting to utilize the fetch API method to initialize the store's state, but for some reason, it is not functioning properly

Answer №1

Edit:

Answer №2

Similar questions

If a specific class is identified, add a border to the div when clicked using JavaScript

Techniques for animating background image using jQuery

Incorporate a variable into a function by integrating it

Pass information from a child component to a parent component within a React.js application

What are the steps to showcase a webcam stream in GLSL by leveraging Three.js?

The process of utilizing RxJS for server polling is a

Combining backend webpack with Vue-CLI 3 for seamless integration

The execution of dynamically generated Javascript in JSON format, returned through AJAX, is prevented when it is appended

Angular code causing an unexpected blank page to be printed again

Unable to dynamically translate special characters using npm latinize

How can I incorporate multiple graphs into my AmCharts display?

CSS and JavaScript Nav Menu Collapse (No Bootstrap)

Issue with ion-content on Ionic app not scrolling down when keyboard is displayed on an Android device

Display the Slug in the Website URL upon clicking on a Blog Post using Angular and Strapi framework

Use JavaScript to swap out various HTML content in order to translate the page

Preventing Click Events during Data Fetching in React.js without Using jQuery

I am trying to map through an array fetched from Firebase, but despite the array not being empty, nothing is displaying on the

Unable to Modify TextField Component in React

Is it possible to swap out the content within a <div> element with an external piece of HTML code using JQuery or JavaScript whenever the viewport dimensions are adjusted?

Handling an Express server that receives a request with no data