如果我的变量是数组，如何更改 vuex 中的状态答案

【问题标题】：How to change state in vuex if my variable is an array如果我的变量是数组，如何更改 vuex 中的状态
【发布时间】：2020-11-15 01:21:47
【问题描述】：

我刚开始学习 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 属性才能添加预加载器类。

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

我有比两个多得多的数组，所以我不想为每个数组做一个单独的突变。

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案1】：

这就是你为它定义突变的方式

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.

【讨论】：