在 vuex 中使用辅助函数答案

【问题标题】：using helper functions in vuex在 vuex 中使用辅助函数
【发布时间】：2019-01-17 19:54:22
【问题描述】：

在 vuex 模块中，我从 2 个不同的来源获取数据（文档和收藏夹），我需要遍历文档并将收藏夹分配给文档。

我在 vuex 模块之外创建了一个可重用的函数来帮助我做到这一点：

const bindFavoriteToDocument = (documents, favorites) => {
  // reset selected favorites
  favorites.forEach(item => {
    item.selected = false
  })
  documents.forEach(item => {
    var favs =
    favorites.filter(f => {
      var filter = f.favoriteDocuments.filter(
        d => d.document === parseInt(item.id) && d.source.toLowerCase().trim() === item.agency.toLowerCase().trim()
      )
      return !!filter.length
    }) || []

    favs.forEach(item => {
      item.selected = true
    })

    item.favorites = favs
    item.favoriteIds = _.pluck(favs, 'id')
    item.active = false
  })
  return documents
}

当所有收藏对象都更新后，我调用此函数来刷新分配给文档的收藏列表。

  deleteFavorite: async ({ dispatch, commit, rootGetters }, payload) => {
    const response = await remove(config.PORTAL_API + 'api/favorite/delete/' + payload.id, rootGetters.token)
    if (response) {
      await dispatch('getFavorites')
      const documents = bindFavoriteToDocument(rootGetters['document/documents'], rootGetters['document/favorites'])
      commit('setDocuments', documents)
    }
  }

编辑收藏后，我会在控制台中看到此错误：

错误：[vuex] 不要在突变之外改变 vuex 存储状态处理程序。

如何在bindFavoriteToDocument 中创建不直接改变存储状态的文档和收藏夹的新副本？

我试过了：

const bindFavoriteToDocument = (documents, favorites) => {
  let favoriteList = favorites
  let documentList = documents
  .
  .
  .
  return documentList
}

但这没有用。

【问题讨论】：

你的问题是什么？
我的错，忘了完成问题。

标签： vue.js vuex

【解决方案1】：

只需创建将调用bindFavoriteToDocument 的突变并设置文档，这样您就可以避免此警告：

  // in actions
  deleteFavorite: async ({ dispatch, commit, rootGetters }, payload) => {
    const response = await remove(config.PORTAL_API + 'api/favorite/delete/' + payload.id, rootGetters.token)
    if (response) {
      await dispatch('getFavorites')
      commit('bindFavoritesAndSetDocuments', { docs: rootGetters['document/documents'], favs: rootGetters['document/favorites'] } );
    }
  }

  //in mutations 
  bindFavoritesAndSetDocuments: (state, { docs, favs }) => {
      const documents = bindFavoriteToDocument(docs, favs);
      // set docs if necessary
  }

【讨论】：