Question

我正在使用最新版本的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做些事情，但不太确定。

Answer 1

使用以下方法可得到预期的结果：

state.settings.push(settingsObject)

我建议继续使用已经注释过的内容，并使用对象而不是数组。

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

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

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

    }
}

更新数组vuex

2 个答案: