Правильное использование геттеров в vuex

Question

В настоящее время я занимаюсь разработкой приложения для vue v2, и это заставило меня задуматься.Трудно найти информацию для хороших практик, поэтому я решил спросить здесь.

У меня есть API-интерфейс laravel и vue для интерфейса.До сих пор мои модели были такими, что в них будет всего несколько объектов (<100), поэтому я просто помещаю их в состояние и получаю то, что когда-либо было необходимо, с помощью геттера.Теперь у меня есть модель, которая будет содержать> 10000 объектов, поэтому перевод их всех в состояние в значительной степени выходит за рамки темы.Способ решения этой проблемы - это действие с действием, которое получает один объект из API по идентификатору и переводит его в состояние после проверки, если его там уже нет.Проверка происходит с геттером, который я также использую, когда мне нужен этот объект.Итак, у меня похожая структура:

// mutation
[mutation_types.FETCH_SOMETHING](state, {something}) {
    if (!this.getters.getSomethingById(something.id)) {
        state.somethings.push(something)
    }
}

// action
const {data} = await axios.get('~route~')
commit(mutation_types.FETCH_SOMETHING, {something: data.something})

// getter
getSomethingById: state => id => {
    return state.somethings.find(something => something.id === id)
}

Так что это работает, но я вижу 2 проблемы.Во-первых, каждый раз, когда мне нужно что-то , я должен вызывать диспетчер, чтобы получить элемент из API в состояние, а затем получатель, чтобы получить реальный объект, и вторая проблема - проверка происходит послевызов API, так что даже если у меня есть конкретное что-то в состоянии, я делаю запрос на него.

Способ исправить обе эти проблемы, которые я хотя бы вызывалпросто работа с геттером, который проверит это состояние, если найденный там идентификатор найден, он будет возвращен, если нет, диспетчер получит его из API и затем вернет его.

Я чувствуюкак будто я добавляю логику к получателю, который там не принадлежит, но я не могу придумать другого способа добиться этого.Есть что-то, что я пропускаю / делаю где-то неправильно?

Answer 1

Воспользуйтесь асинхронным характером действий и обещаний vuex.При необходимости выполните проверку на наличие непосредственно в действии вместе с вызовом API:

state: {
  items: []
}

mutations: {
  addItem: (state, item) => {
    state.items.push(item)
  }
}

actions: {
  fetchItem: async (context, id) => {
    let item = context.state.items.find(i => i.id === id)
    if (!item) {
      item = await axios.get('/example/' + id).then(response => {
        context.state.commit('addItem', response.data)
        return response.data
      })
    }
    return item
  }
}