Vuex API data is empty

Hello,

In Vuex I am retrieving data from API and store it in an array, I can access this state in my components in Computed hook. But I can't do anything with this data in Methods or Mounted. What I'm trying to do is access this data from a component and do some data formulation based on the buttons clicks.

The Vuex store:

const store = new Vuex.Store({
    state: {
        users: [],
    },
    actions: {
        loadData({commit}) {
            axios.get("/api/users").then((response) => {
                commit('updateUsers',response.data.data);
            });
        },

        updateData(state,users){
            state.users = users;
        },


})

Vue instance:

const vm = new Vue({
        el: '#app',
        router,
        store,
        created() {

           this.$store.dispatch('loadData'); 
          },
        render: h => h(App)
    });

The Component:

export default {
    data(){
        return {
           newData: [],
        }
    },
    mounted(){
        this.newData = this.data; // here it's returning empty value;
	this.newData = this.$store.state.users // returning empty value too.
    },

    computed: {
        data(){
            return this.$store.state.users; //here it's working and I can access the users array data
        },
       
      
        
    },
    methods: {

      //when I try to call this.data in any method I'm having empty value

    }
}

I tried to put any data rather than an API request in the state, and it's working fine, but I can't figure out the best practice with API requests.

Thanks for your help!

piljac1

5 years ago

Level 28

It is working in your computed property because it updates when one of its dependencies updates. In your case, it returns an empty array first and then updates after the users were fetched. Also, what does your this.data refer to, because it isn't declared anywhere ?

I would suggest that you use a getUsers getter in your Vuex module as it is a better practice than accessing the state directly. Then you can use it by declaring it as a computed :

computed: {
  // Map necessary getters (add your namespace string as a first parameter of mapGetters if your module is namespaced)
  ...mapGetters(['getUsers']),

  // Other computed properties
}

You can then use it as it was a data property. Now, it won't solve your issue that it is not set right off the bat because the API data has not been returned yet. Unfortunately, the API call is not instant, so you have to deal with it. There are many ways to do so. One of them would be using Vuex' subscribe functionality which is triggerred whenever a mutation is committed :

// In your component
data() {
  return {
    users: []
  }
},

// ...

created() {
  // Set a watcher on Vuex' mutations
  this.unsubscribe = this.$store.subscribe((mutation, state) => {
    // Rehydrate the users when an updateUsers mutation was processed inside the Vuex module
    // Here, add your namespace if your module is namespaced : yourNamespace/updateUsers
    if (mutation.type === 'updateUsers') {
      this.users = this.getUsers;
    }
  });
},

beforeDestroy() {
  // Unsubscribe when the component is going to be destroyed
  this.unsubscribe();
}

P.S. This setup is good if you want to watch for multiple value changes. If users is the only value you want to watch, I suggest you use the Vuex' watch function instead.

1 like

issamahw

5 years ago

Level 1

Thanks for your comment, I tired this way but I am stuck at the same trouble. My goal is to load the data from the API and do some changes on it, while I want to still be able to listen to changes on this data, i:e if the data changed from the API source I want my modified data to be changed too. I'm using Laravel echo with Pusher to listen to changes and it's working, but only if I provided the data in Computed Hook. And in your case, the updated data will not change on Created Hook.

I hope I have fulfilled the explanation.

kkhicher1

5 years ago

Level 2

you need to add mutation - check Your code from VuexStore - commit('updateUsers',response.data.data);

After mutation you can get data - check more details here - https://vuex.vuejs.org/guide/mutations.html

kkhicher1

5 years ago

Level 2

mutations: {
  updateUsers(state, users) {
    state.users = users
  }
}

piljac1

5 years ago

Level 28

Well what I proposed is the simplest form, but you can add some logic to manage diffs between the new data received in Vuex' subscribe/watch function and your current user data to merge both together and keep the appropriate info based on your business logic.

Also you're saying that the updated data will not change in the created hook :

What do you mean by that ? Because you cannot guarantee that your API data has been returned at this point.
What logic are you trying to implement in the created hook that can't be elsewhere in your code ?

1 like

issamahw

5 years ago

Level 1

I don't have any extra data, what I'm trying to achieve here is to receive the data from API, format it in a table and let the user filter the rows by date. But the main issue is that I really want when any modified data arrives from the API to be automatically filled in the table at the same structure.

What I achieved so far based on your suggestion: Map Getters & Subscribe is receiving new updates from Vuex.

But my challenge now is that any Method I use to let the user filter the table's data will not update based on the API changes.

PS: the same data is displayed in multiple structures within the same page, that's why it's necessary to receive it as it is from the API.

Please or to participate in this conversation.