CODEWITHSUNDEEP
vue.jsvuejs2vuex
Gleb Krupakov
Gleb Krupakov

Reputation: 33

How to change state in vuex if my variable is an array

I just started learning Vue and couldn't find an answer myself.

I have several arrays with data that will be loaded dynamically from the database. The objects inside them have an isLoaded property to identify the loading state.

The question is.

How can I change the value of isLoaded without passing the entire object to the mutation?

Like passing only the index and the name of an array.

Right now I do it like this:

    export default new Vuex.Store({
      state: {
        books: [
          {
            id: 1,
            title: 'Random',
            img: '',
            href: '/',
            isLoaded: false
          }
        ],
        games: [
          {
            id: 1,
            title: 'Random',
            img: '',
            href: '/',
            isLoaded: false
          }
        ]
      },
      getters: {
        books(state) {
          return state.books
        },
        games(state) {
          return state.games
        }
      },
      mutations: {
        updateLoadStatus(state, item) {
          item.isLoaded = true
        }
      }
    })

The isLoaded prop is needed in order to add the preloader class.

<div :class="{loading: !book.isLoaded}">
  <img :src="book.img" :alt="book.title" @load="updateLoadStatus(book)">
</div>

I have a lot more arrays than two, so I don't want do a separate mutation for each one.

Upvotes: 1

Views: 476

Answers (1)

Amaarockz
Amaarockz

Reputation: 4674

This is how you define the mutation for it

mutations: {
        updateLoadStatus(state, payload) {
          state[payload.key][payload.index].isLoaded = payload.value;
        }
   }

and this is how you call it

this.$store.commit('updateLoadStatus', { key: 'books', index: 1, value:true}); // based on the object you pass as payload..the mutation will update the corresponding array item.

Upvotes: 1

Related Questions