Nuxt 2 + Vuex 应用启动时从 Capacitor Storage 加载默认状态失败如何解决？

核心错误点 #

• Vuex Mutation 不支持异步操作，你将异步的存储读写逻辑都放在了mutation中，违反Vuex设计规范，异步逻辑必须放在Action中执行
• 调用异步方法getData时未加await关键字，导致拿到的是Promise对象而非实际存储值，判断逻辑失效
• mutations配置中重复声明setDefaultSettings，末尾多余的setDefaultSettings()属于无效语法，会导致模块解析异常
• 未在应用启动生命周期中触发初始化逻辑，就算方法逻辑正确也不会自动执行
• this.$CapacitorStorage在Store模块中直接调用可能不存在注入上下文，建议直接引入Capacitor Storage模块使用

修正后的代码实现 #

1. 重写 store/storage.js #

import { Storage } from '@capacitor/storage'

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

// 通用读取方法
async function getData (key) {
  const { value } = await Storage.get({ key })
  return value
}

export const mutations = {
  // 同步更新单个配置，仅负责修改状态
  updateSetting (state, { key, value }) {
    state.app_settings[key] = value
  },
  // 批量初始化配置，仅负责修改状态
  initSettings (state, settings) {
    state.app_settings = Object.assign({}, state.app_settings, settings)
  }
}

export const actions = {
  // 异步更新配置：先改状态再持久化到本地存储
  async updateSetting ({ commit }, payload) {
    commit('updateSetting', payload)
    await Storage.set({
      key: payload.key,
      value: payload.value
    })
  },
  // 异步初始化配置：读取本地存储后覆盖默认值
  async loadStoredSettings ({ commit }) {
    const theme = await getData('theme')
    const refreshButtonPlacement = await getData('refreshButtonPlacement')
    const fetchTimeout = await getData('fetchTimeout')
    // 仅将已存储的配置传入初始化
    const storedSettings = {}
    if (theme) storedSettings.theme = theme
    if (refreshButtonPlacement) storedSettings.refreshButtonPlacement = refreshButtonPlacement
    if (fetchTimeout) storedSettings.fetchTimeout = Number(fetchTimeout) // 本地存储为字符串，需要转数值类型
    commit('initSettings', storedSettings)
  }
}

2. 新增应用启动初始化逻辑 #

在Nuxt项目中新建plugins/init-settings.js，并在nuxt.config.js中注册该插件，实现启动时自动加载配置：

// plugins/init-settings.js
export default async ({ store }) => {
  await store.dispatch('storage/loadStoredSettings')
}

// nuxt.config.js 新增配置
export default {
  // 其余原有配置保持不变
  plugins: [
    '~/plugins/init-settings.js'
  ]
}

3. 原有业务代码兼容 #

页面中的updateSetting调用逻辑不需要修改，原有交互逻辑可直接正常运行。

内容的提问来源于stack exchange，提问作者Ryan H