Question

我目前正在使用vue v2开发一个应用程序，这让我开始思考。很难找到良好实践的信息，所以我决定在这里询问。

我有一个laravel api和前端vue。直到现在，我的模型还只能容纳几个对象（<100），所以我只是将其置于状态，并用吸气剂获得所需的一切。现在，我有一个模型，该模型将容纳> 10000个对象，因此将它们全部置于状态几乎不属于主题。我解决此问题的方法是一个具有操作的操作，该操作通过id从api获取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个问题。第一个是每次需要 something 时，我都应该调用调度程序以将api中的项目转换为状态，然后调用getter来获取实际的对象，第二个问题是正在检查在api调用之后，所以即使我在状态中有这个特定的东西，我也会对此进行请求。

一种解决这两个问题的方法，尽管我通过使用getter来调用just，这将检查该状态，如果在其中找到了搜索到的ID，则将其返回，如果未找到，则调度将获取它从api中返回，然后返回。

我觉得我正在为不属于该方法的吸气剂添加逻辑，但是我想不出另一种方法来实现此目的。我有什么地方想念/做错了吗？

Answer 1

利用Vuex动作和Promise的异步特性。如果需要，请直接在操作中进行检查，并与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
  }
}

在vuex中正确使用吸气剂

1 个答案: