"带有 vue 的离子存储"

Question

我正在使用带有Vue 3.0.0的Ionic Framework v5构建应用程序。

我使用Vuex store来存储全局应用信息，例如用户登录令牌。

// file src\store.ts
export const store = createStore({
    state(){
      return { 
        loginToken;
      }
    },
    mutations: {
      updateLoginToken(state: any, token: string){
        state.loginToken = token;
      }
    },
    getters: {
      token(state: any){
        return state.loginToken;
      }
    }
})

我还需要在应用程序关闭或刷新时保存此令牌，因此我需要将其存储在某种本地存储中。

官方文档建议使用@ionic/storage来访问多个平台上的存储引擎。

要初始化商店，我需要执行以下代码：

import { Storage } from '@ionic/storage';

const storage = new Storage();
await storage.create();

我对这一切都很陌生，我找不到在哪里放置这段代码来初始化存储，以及如何访问 vuex 存储中的存储对象，执行storage.set(...)和storage.get(...) ？

Answer 1

@ionic/storage 与 @capacitor/storage

首先，您需要验证您是否真的需要@ionic/storage ，或者@capacitor/storage是否足够（在大多数情况下是这样）。 使用@ionic/storage需要在整个应用程序中共享一个实例。 @capacitor/storage可以通过导入直接使用。

这些插件之间的比较可以在这里找到： 电容器存储或科尔多瓦存储

在这个答案中，我假设您真的想使用@ionic/storage所以您需要首先创建一个我们想要共享的实例。

用于在您的应用程序中共享 @ionic/storage 实例的插件

创建一个 vue 插件，在其中创建存储实例并将其保存在全局变量中。 如果需要，也可以将它附加到您的 VUEX 商店。

在你的 main.js 中的某个地方，你将插件附加到你的 Vue 应用程序：

app
  .use(...)
  .use(yourPlugin)

插件代码：

import { Storage } from '@ionic/storage'

install: async (app) => {
  const storage = new Storage()
  const storageInstance = await storage.create()

  app.config.globalProperties.$ionicStorage = storageInstance
  app.config.globalProperties.$store.$ionicStorage = storageInstance // This one is only needed if you want to access the ionic storage instance in your VUEX store actions
}

将数据写入设备存储

在您的情况下，如果发生特定的 VUEX 突变，您想向设备存储写入一些内容。 在这种情况下，有多个选项可以写入设备存储。

您可以像这样在 VUEX 操作中运行突变，然后将其保存到设备存储中：

actions: {
  async setLoginToken ({ commit, state }, loginToken) {
    commit('updateLoginToken', loginToken)
    this.$ionicStorage.set({
      key: 'your-storage-key',
      value: JSON.stringify({ loginToken })
    })
  }
}

如果您只想同步几个 VUEX 存储属性，这种方法是有意义的。 如果你想同步所有东西，或者想让事情更加分离，你可以将一个 VUEX 插件附加到你的 VUEX 商店并订阅突变。

如何附加 VUEX 插件： https ://vuex.vuejs.org/guide/plugins.html

通常，将 VUEX 插件注册到您的商店允许您订阅突变。 在您的情况下，每次更新登录令牌时都会运行updateLoginToken突变。 所以插件需要注意在突变运行后将新的 loginToken 写入设备存储。

这看起来类似于：

const myPlugin = store => {
  // called when the store is initialized
  store.subscribe((mutation, state) => {
    // called after every mutation.
    // The mutation comes in the format of `{ type, payload }`.
    // Make sure the code runs only for the relevant mutation

    store.$ionicStorage.set({
      key: 'your-storage-key',
      value: JSON.stringify(xxx)
    })
  })
}

从设备存储中读取数据

现在您在设备存储中拥有了登录令牌。 当应用程序重新启动时，您需要从那里抓取它并将其推送到 VUEX 商店。 有不同的方法来设置它。 我个人更喜欢将它加载到自定义的 Vue 插件中。

首先，您再次将插件附加到您的 vue 应用程序。 确保此插件附加在上面的插件之后（全局共享 ionicStorage 实例的插件）。

在插件中，您只需从设备存储中读取保存的值并将其写入您的 VUEX 存储。

export default {
  install: async (app) => {
    const storageContent = await app.config.globalProperties.$ionicStorage.get({ key: 'your-storage-key' })
    const storageContentParsed = JSON.parse(storageContent.value || '{}')
    const $store = app.config.globalProperties.$store

    $store.replaceState({
      ...$store.state,
      ...storageData
    })
  }
}

注意：这些只是最小的代码片段。 因此，请确保使其适应您自己的用例。 一般来说，这应该确保 loginToken 正确同步到您的设备存储（在移动设备和网络上）。

Answer 2

我为使这一切正常工作所做的一切：

我创建了一个名为Storage.ts的插件文件，它创建了插件实例并将其添加到应用程序全局属性中：

import { Storage } from '@ionic/storage'

export default async function storageFactory(wsBaseUrl: string) {

  const storage = new Storage();
  // create storage
  const storageInstance = await storage.create();

  // my custom stuff here ...

  // in the end, return the plugin installer
  return {
    install(app: any){
      app.config.globalProperties.$ionicStorage = storageInstance;
      // special copy for vuex storage
      app.config.globalProperties.$store.$ionicStorage = storageInstance; 
    }
  }
}

然后在main.ts中，我将自定义插件添加到主应用程序中：

import storageFactory from '@/plugins/Storage';

// create storage plugin 
const storagePlugin = await storageFactory(config.wsBaseUrl);

// create app
const app = createApp(App)
  // ... other stuff here
  .use(storagePlugin)

// mount when router is ready
router.isReady().then(() => {
  app.mount('#app');
});

然后，在其他应用程序文件的任何地方，我都会像这样使用存储：

// set new key
await (this as any).$ionicStorage.set('token', token );
// remove the key
await (this as any).$ionicStorage.remove('token');