Блог

Я работаю с Nuxt JS 2.15 и Vuex. Я создаю гибридное приложение, использующее конденсатор JS, и мне нужно использовать хранилище телефона для сохранения таких данных, как настройки приложения и настройки пользователя на телефоне. Для достижения этой цели я использую модуль хранения данных совместно с Vuex.

В настоящее время я могу установить некоторые настройки приложения по умолчанию в app_settings состоянии моего магазина Vuex, а затем вызвать @click файл vue для обновления настроек приложения, подобных этому:

 /*
** Update setting
*/
updateSetting (model, value) {
  this.$store.commit('storage/updateSetting', {
    key: model,
    value: value
  })
}
 

Все вышесказанное привязано к нажатию кнопки, где v-model соответствует настройкам из магазина:

 <div v-for="(option, index) in options.theme" :key="index">
  <hr v-if="index > 0" />
  <label
    :for="`theme-${index}`"
    class="tw-flex tw-items-center tw-w-full tw-py-4 tw-px-8 tw-cursor-pointer hover:tw-bg-gray-100 active:tw-bg-gray-200 tw-h-20">
    <div class="tw-flex tw-w-full tw-items-center">
      <div class="tw-text-left">
        <h2 class="tw-font-medium lg:tw-text-lg tw-text-gray-500">{{ option.title }}</h2>
      </div>
      <div class="tw-ml-auto">
        <div class="tw-flex-1 tw-items-center tw-flex tw-justify-end">
          <input :id="`theme-${index}`" v-model="$store.state.storage.app_settings.theme" @change="updateSetting('theme', $store.state.storage.app_settings.theme)" :value="option.value" name="theme" type="radio" class="focus:tw-ring-indigo-600 tw-h-4 tw-w-4 tw-text-indigo-800 border-gray-300">
        </div>
      </div>
    </div>
  </label>
</div>
 

Когда я изменяю настройку, конечно же, моя updateSetting мутация выполняется по назначению, обновляя состояние хранилища Vuex, а также устанавливая a CapacitorStorage.key в моем браузере (это будет хранилище телефона на физическом телефоне).

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

В настоящее время у меня есть функция, setDefaultSettings которую я намерен запустить при запуске приложения, и установить все настройки в этом app_settings состоянии.

Почему моя функция неправильно вызывается при запуске, что я упускаю или что мне нужно изменить здесь?

store/storage.js

 export const state = () => ({
  app_settings: {
    theme: 'system',
    refreshButtonPlacement: 'right',
    fetchTimeout: 120
  }
})

async function getData (storage, key) {
  const { value } = await storage.get({ key: key })
  return value
}


export const mutations = {

  /*
   * Set default settings on app launch
   */
  async setDefaultSettings (state, data) {
    const theme = getData(this.$CapacitorStorage, 'theme')

    if (theme) {
      state.app_settings.theme = getData(this.$CapacitorStorage, 'theme')
    }
  },

  /*
   * Update app setting
   */
  async updateSetting (state, data) {
    state.app_settings[data.key] = data.value

    await this.$CapacitorStorage.set({
      key: data.key,
      value: data.value
    })
  },

  // TODO: set dedault settings
  setDefaultSettings()

}