带有 vue 的离子存储

问题描述 投票：0回答：3

我正在使用 

Ionic Framework v5
和 
Vue 3.0.0
构建应用程序。

我使用 

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(...)
？

vue.js ionic-framework ionic-storage
3个回答
4
投票

@ionic/storage 与 @capacitor/storage

首先您需要验证，您是否确实需要 

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

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

在这个答案中，我假设您确实想使用

@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
突变。因此，插件需要注意在突变运行后将新的登录令牌写入设备存储。

这看起来类似于：

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

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

1
投票

为了让这一切发挥作用，我做了什么：

我创建了一个名为 

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');
0
投票

要在 

Vue3
中使用新的 @ionic/storage，您可以创建一个新文件，例如： 
ionicStorageService.js
此文件应包含此代码

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

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

export default storage;

此文件将允许您访问任何不是 vue 组件的文件中的存储，例如您的 Vuex Store，只需将文件导入到您的 

vuexStore.js
中并像这样使用它：

await storage.set("example", exampleData);

然后，如果您想轻松访问 vue 组件内部，您可以创建另一个名为 

ionicStoragePlugin.js
的文件，其中包含以下代码：

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

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

    // Provide the storage globally
    app.config.globalProperties.$storage = storage;
  },
};

然后在您的

main.js

上实施并使用它 
import ionicStoragePlugin from "./ionicStorage/ionicStoragePlugin";
//Your code here
const app = createApp(App).use(ionicStoragePlugin);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.