Блог

Я только начал изучать Vue и сам не мог найти ответ.

У меня есть несколько массивов с данными, которые будут динамически загружаться из базы данных. Объекты внутри них имеют свойство isLoaded для определения состояния загрузки.

Вопрос в том.

Как я могу изменить значение isLoaded, не передавая весь объект мутации?

Например, передача только индекса и имени массива.

Прямо сейчас я делаю это так:

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

isLoaded prop необходим для добавления класса preloader.

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

У меня намного больше массивов, чем два, поэтому я не хочу делать отдельную мутацию для каждого из них.

Вот как вы определяете мутацию для нее

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

и вот как вы это называете

 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.