Обновить существующий объект в массиве vuex - PullRequest
Новая
       20

Обновить существующий объект в массиве vuex

0 голосов
/ 12 июня 2019

Я использую последнюю версию 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
      })
    }

}

Файл My 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, но не слишком уверенно.

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Простой способ сделать это - использовать пакет 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
        }

    }
}
0 голосов
/ 12 июня 2019

Результат - именно то, чего следует ожидать, используя: 

state.settings.push(settingsObject)

Я бы порекомендовал пойти вместе с тем, что уже было прокомментировано, и использовать объект вместо массива.

Используйте: settings: {} вместо settings: [] для объявления объекта и измените state.settings.push(settingsObject) на state.settings = settingsObject для переопределения существующего объекта вместо добавления нового объекта в массив.

См. https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules для получения дополнительной информации и объяснений.

...