更新数组 vuex 中的现有对象答案

【问题标题】：Update existing object in array vuex更新数组 vuex 中的现有对象
【发布时间】：2019-06-12 12:28:32
【问题描述】：

我正在使用最新版本的 Nuxt JS 2.8.1 来构建一个混合应用程序。我正在使用 Vuex 的模块模式，因为建议这样做，以便我保存数据并跨不同的页面、组件和布局访问它。

在一个特定的页面上，我构建的一个设置页面有一个 Vuetify 开关，本质上是一个开关，它将推送一个值 true 或 false，我正在使用它来实现暗模式功能并有条件地在页面上呈现样式。

我的切换开关将解析通过输入上的v-model 更新的设置列表，然后提交到我的商店：

HTML

<v-list-tile avatar>
        <v-list-tile-action>
          <v-switch color="primary" v-model="settings.darkMode" @change="saveSetting('darkMode')"></v-switch>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Dark mode</v-list-tile-title>
          <v-list-tile-sub-title>Toggle app's dark mode.</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>

我的 JS

data () {
    return {
      settings: {
        darkMode: false,
        dataSaver: false,
      },
      retrieveSettings: null,
      isClearing: {
        local: false,
        sessions: false,
        all: false
      }
    }
  },
methods: {

  /**
     * Save settings to storage
     */
    saveSetting() {
      localStorage.setItem('my_settings',JSON.stringify(this.settings));
      var beacon_settings = JSON.parse(localStorage.getItem('my_settings'));
      this.retrieveSettings = beacon_settings
      this.$store.commit('settings/add', {
        darkMode: this.settings.darkMode,
        dataSaver: this.settings.dataSaver
      })
    }

}

我的 store/settings.js 文件 (Vuex)

export const state = () => ({
  settings: []
})

export const mutations = {
  add (state, settingsObject) {
    state.settings.push(settingsObject)
  }
}

这将成功推送我可以通过网站其他页面中的计算属性检索的数据，但是，每次我切换开关时，它都会将一个新对象推送到 settings 数组中，而不是更新现有的一个，例如：

[
  {
    darkMode: true,
    dataSaver: false
  },
  {
    darkMode: false,
    dataSaver: false
  }
]

最好我只想更新已推送的现有对象，而不是推送另一个对象，我正在努力解决这一点，似乎无法解决这个问题。我可能需要对$set 做点什么，但不太确定。

【问题讨论】：

为什么需要这个数组？为什么不直接使用对象并更新键？

标签： vue.js vuejs2 vuex nuxt.js

【解决方案1】：

结果正是预期的结果：

state.settings.push(settingsObject)

我建议按照已经评论的内容使用对象而不是数组。

使用：settings: {} insted of settings: [] 声明一个对象并将state.settings.push(settingsObject) 更改为state.settings = settingsObject 以覆盖现有对象，而不是将新对象添加到数组中。

有关更多信息和说明，请参阅：https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules。

【讨论】：

【解决方案2】：

您可以使用vuex-map-fields npm 包来轻松实现此目的。当您使用项目列表时，您必须使用 mapMultiRowFields。您要做的只是生成自动计算属性并在更新时它也会自动设置/更新存储中的值。你的代码会像

HTML：-

<v-list-tile avatar>
        <v-list-tile-action>
          <v-switch color="primary" v-model="settings.darkMode" @change="saveSetting('darkMode')"></v-switch>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Dark mode</v-list-tile-title>
          <v-list-tile-sub-title>Toggle app's dark mode.</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>

Js:-

import { mapMultiRowFields } from 'vuex-map-fields';
export default {
    data () {
        return {
          retrieveSettings: null,
          isClearing: {
            local: false,
            sessions: false,
            all: false
          }
        }
      },
      computed: {
       ...mapMultiRowFields(['settings']),
    },
    methods: {

      /**
         * Save settings to storage
         */
        saveSetting() {
          localStorage.setItem('my_settings',JSON.stringify(this.settings));
          var beacon_settings = JSON.parse(localStorage.getItem('my_settings'));
          this.retrieveSettings = beacon_settings
        }

    }
}

【讨论】：