Ionic5+Vue3项目中@ionic/storage的初始化及Vuex内调用方法

问题1：@ionic/storage初始化代码存放位置 #

推荐单独封装全局单例的storage实例，避免重复初始化，具体实现步骤如下：

1. 新建src/utils/storage.ts文件，封装storage的初始化逻辑和单例实例：

// src/utils/storage.ts
import { Storage } from '@ionic/storage';

const storage = new Storage();

// 对外暴露初始化方法
export const initStorage = async () => {
  await storage.create();
};

// 对外暴露全局唯一的storage实例
export default storage;

2. 在项目入口文件src/main.ts中调用初始化方法，保证应用挂载前storage已经初始化完成：

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { store } from './store';
import { initStorage } from './utils/storage';

// 异步初始化应用
const bootstrap = async () => {
  // 先初始化storage
  await initStorage();
  const app = createApp(App);
  app.use(store);
  app.mount('#app');
};

bootstrap();

问题2：Vuex store中访问storage实例实现数据读写 #

直接导入封装好的storage实例即可在store的任意位置调用set/get/remove等方法，修改后的src/store.ts代码如下：

// file src\store.ts
import { createStore } from 'vuex';
// 导入全局storage实例
import storage from './utils/storage';

export const store = createStore({
    state(){
      return { 
        loginToken: ''
      }
    },
    mutations: {
      // 从本地存储加载token到vuex
      setStoredToken(state: any, token: string){
        state.loginToken = token;
      },
      updateLoginToken(state: any, token: string){
        state.loginToken = token;
        // 更新token的同时持久化到本地存储
        storage.set('login_token', token);
      },
      // 退出登录时清空token
      clearToken(state: any){
        state.loginToken = '';
        storage.remove('login_token');
      }
    },
    actions: {
      // 应用启动时读取本地存储的token
      async loadLocalToken({ commit }){
        const localToken = await storage.get('login_token');
        if(localToken){
          commit('setStoredToken', localToken);
        }
      }
    },
    getters: {
      token(state: any){
        return state.loginToken;
      }
    }
})

最后修改入口文件src/main.ts的初始化逻辑，在storage初始化完成后调用加载本地token的action：

const bootstrap = async () => {
  await initStorage();
  const app = createApp(App);
  app.use(store);
  // 加载本地存储的token到vuex
  await store.dispatch('loadLocalToken');
  app.mount('#app');
};

内容的提问来源于stack exchange，提问作者sorioli computec