时间戳

首页 > 解决方案 > vuex中getter的正确使用

vue.js - vuex中getter的正确使用

问题描述

我目前正在使用 vue v2 开发一个应用程序，有些事情让我开始思考。很难找到有关良好做法的信息，所以我决定在这里问。

我有一个用于前端的 laravel api 和 vue。到现在为止，我的模型只能容纳几个对象（< 100），所以我只是将其放入状态，并使用吸气剂获得所需的东西。现在我有一个模型可以容纳超过 10000 个对象，因此将它们全部放入状态几乎不是主题。我解决这个问题的方法是通过 id 从 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)
}

​​​

所以这是可行的，但我看到了两个问题。第一个是每次我需要一些东西时，我应该调用调度以将项目从 api 获取到状态，然后 getter 获取实际对象，第二个问题是在 api 调用之后进行检查，所以即使如果我在该州有这个特定的东西，我正在请求它。

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

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

标签： vue.jsvuejs2vuex

解决方案

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

推荐阅读