D
D
Dos2019-11-11 07:14:39
Vue.js
Dos, 2019-11-11 07:14:39

Vuex how to work with it?

Hey! I'm using nuxtjs. Which has a vuex store. I have a few questions on this topic that I can't find myself:
1. How long is the data lifetime in the Vuex store ? I noticed that when you press F5, the data from the store disappears. Or is it only in dev mode?
2. I have an api that gets a list of events and stores it in the store (code below). To do this, I send a request to api/events. However, it does not return complete data on events, unlike a query by id api/events/1. As a result, when working through the vuex store and navigating by id, my data is different. Namely, one cancelReason field is missing. When developing the api, I considered that it was not needed for display in the list and did not display it. Now I have to have two stores events and event in Vuex. How to sync in store vuex? Or do I need to add this data field to the api? How to do it right?
3. How to change the events array in actions? . I use this asynchronous request to api

async activate({commit}, event) {
    await this.$axios.$post('/events/' + event.id + '/activate')
  },
. I change the status to active. How can I update the store by id now?
4. How much data can be entered into the vuex store?
5. And the last question. Is it even worth using vuex for api? In general, I read a lot that this is a good practice at work. You can change the api storage to another one at any time. Also, the data in the vuex store is always up-to-date, even if our requests are asynchronous. This is also a big plus. Therefore, I believe that using the vuex store is a good practice. However, I can not fully understand the correct operation with it ...
PS Thank you for your help. I'm looking for the answer half the night))) If there are good examples from the VUEX Store, I will be grateful for the links)
My code
export const state = () => ({
  events: []
});

export const mutations = {
  SET_EVENTS(state, events) {
    state.events = events
  }
};

export const actions = {
  async activate({commit}, event) {
    await this.$axios.$post('/events/' + event.id + '/activate')
  },
  async cancel({commit}, event) {
    await this.$axios.$post('/events/' + event.id + '/cancel');
  },
  async all({commit}) {
    const events = await this.$axios.$get('events');
    commit('SET_EVENTS', events.items)
  }
};

export const getters = {
  events: s => s.events,
  get: s => id => {
    return s.events.find(event => event.id === id);
  },
};

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question