using helper functions in vuex

Question

In vuex module I'm getting data (documents and favorites) from 2 different sources and I need to loop over the documents and assign favorites to a document.

I created a reusable function outside the vuex module to help me do this:

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
}

When everything the favorite objects are updated, I call this function to refresh the list of favorites assigned to a document.

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

After editing a favorite, I'll seeing this error in the console:

Error: [vuex] Do not mutate vuex store state outside mutation handlers.

how do I create a new copy of documents and favorites in bindFavoriteToDocument that doesn't directly mutate the store state?

I have tried:

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

but that didn't work.

what is your question?

Max Sinev
– Max Sinev

2018-08-10 08:56:20 +00:00
Commented Aug 10, 2018 at 8:56 — Max Sinev
– Max Sinev, Commented Aug 10, 2018 at 8:56
my bad, forgot to complete the question.

capiono
– capiono

2018-08-10 09:26:29 +00:00
Commented Aug 10, 2018 at 9:26 — capiono
– capiono, Commented Aug 10, 2018 at 9:26

Max Sinev · Accepted Answer · 2018-08-10 09:50:21Z

1

Just create mutation which will call bindFavoriteToDocument and set documents so you can avoid this warning:

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

answered Aug 10, 2018 at 9:50

Max Sinev

6,0192 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using helper functions in vuex

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related