在vuex中正确使用getter-Java 学习之路

我正在用vue v2开发一个应用程序，有些东西让我思考 . 很难找到良好做法的信息，所以我决定在这里问一下 .

我有前端的laravel api和vue . 到目前为止，我的模型只能容纳几个物体（<100），所以我只是把它放在状态中，并用吸气剂获得所需的物体 . 现在我有一个可以容纳> 10000个对象的模型，因此将它们全部放入状态几乎就是主题 . 我解决这个问题的方法是使用动作从id获取api中的单个对象，并将其置于状态，检查后是否已经存在 . 当我需要这个对象时，我也会使用一个getter来进行检查 . 所以我有类似的结构：

// 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)
}

所以这是有效的，但我看到有两个问题 . 第一个是每当我需要一些东西时我应该调用调度来从api进入状态然后获取实际对象的getter，第二个问题是在api调用之后进行检查，所以甚至如果我在州内有这个特定的东西，我正在请它 .

一种解决这两个问题的方法我虽然调用了正在使用的getter，它将检查该状态，如果在那里找到搜索到的ID它将被返回，如果没有，调度将从api获取它然后返回它 .

我觉得我正在为不属于那里的吸气剂添加逻辑，但我想不出另一种方法来实现这一点 . 在某处我有什么遗漏/做错了吗？

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
  }
}

回复于 2024-04-29T05:33:24+08:00

在vuex中正确使用getter

1 回答

相关问题