Support for Vuex 4 and Vue 3?

[ux-engineer]

Sorry if this is a non-issue, as I haven't upgraded this part of my codebase...

Now that Vue 3.0 reached stable version, with Vuex 4 still in beta, how are your plans on upgrading for supporting these new versions?

[perarnborg]

Based on what I have seen I think there should not be anything preventing using the latest version of vuex-oidc with Vue3 – but I have planned to take a closer look at that, and also updating the documentation. I will do this as soon as possible.

Another question that I haven't thought so much about is if we should take advantage of the Composition API in any way to improve dev exprience when implementing the package.

[ux-engineer]

Please remember to test using TypeScript!

Have been upgrading to Vuex 4 using TypeScript. There doesn't seem to be official examples for using modules with TS... Found some examples and put together a setup which preliminarily seems to work. Moving on to adding vuex-oidc module into the mix...

[ux-engineer]

Here's my store module:

import { Store as VuexStore, Module } from 'vuex';
import { vuexOidcCreateStoreModule, VuexOidcState } from 'vuex-oidc';
import { WebStorageStateStore, Log } from 'oidc-client';

// eslint-disable-next-line import/no-cycle
import { RootState } from '@/store';

import { oidcSettings } from '@/../config/oidc';

export type OidcStore<S = VuexOidcState> = VuexStore<S>;

// Enable oidc-client-js library's internal logging via environment variables
if (process.env.VUE_APP_OIDC_LOGGER_ENABLED === 'true') {
  Log.logger = console;

  if (process.env.VUE_APP_OIDC_LOGGER_LEVEL === 'ERROR') {
    Log.level = Log.ERROR;
  } else if (process.env.VUE_APP_OIDC_LOGGER_LEVEL === 'WARN') {
    Log.level = Log.WARN;
  } else if (process.env.VUE_APP_OIDC_LOGGER_LEVEL === 'INFO') {
    Log.level = Log.INFO;
  } else if (process.env.VUE_APP_OIDC_LOGGER_LEVEL === 'DEBUG') {
    Log.level = Log.DEBUG;
  }
}

const settings = {
  ...oidcSettings,
  userStore: new WebStorageStateStore({ store: window.sessionStorage }),
};

// Create store module
export const store: Module<VuexOidcState, RootState> = vuexOidcCreateStoreModule(
  settings,
  // Optional settings
  {
    namespaced: true,
    dispatchEventsOnWindow: true,
  },
);

Working quite well but with a few remaining typing problems as in an example demonstrated here: https://stackoverflow.com/questions/64080549/using-vuex-4-modules-in-vue-3-with-typescript-and-how-to-fix-cyclical-dependenc