Document Vue 3 / vuex 4 compatibility

[johtso]

In a landscape where there is mixed support for the latest version of Vue, it would be great to have a small mention of version compatibility.

From glancing through closed issues, it seems like the project works fine with vuex 4, right?

[gabrielmbmb]

Hi @johtso, I have not tested the plugin with Vue 3 and Vuex 4 on my own, but I think it should work fine. Anyway, I'll try to do some testing and document it this week!

[gabrielmbmb]

Hi @johtso ! I've checking the compatibility of the plugin with Vue 3 and Vuex 4 these days and I didn't found any problem.

The code I written is in TypeScript, and I used it to sync the locale between several tabs:

index.ts

import { createStore } from 'vuex';
import locale, { LocaleState } from './locale.module';
import createMultiTabState from 'vuex-multi-tab-state';

export interface RootState {
  locale: LocaleState;
}

export default createStore({
  modules: {
    locale,
  },
  plugins: [
    createMultiTabState({
      statesPaths: ['locale'],
    }),
  ],
});

locale.module.ts

import { ActionContext, ActionTree, GetterTree, MutationTree } from 'vuex';
import { RootState } from './index';
import I18n from '@/plugins/i18n';

export enum ActionTypes {
  CHANGE_LOCALE = 'changeLocale',
}

export enum MutationTypes {
  SET_LOCALE = 'setLocale',
}

// State
export interface LocaleState {
  locale: string;
}

const state: LocaleState = {
  locale: process.env.VUE_APP_I18N_LOCALE,
};

// Getters
export interface Getters {
  getLocale(state: LocaleState): string;
}

const getters: GetterTree<LocaleState, RootState> & Getters = {
  getLocale(state) {
    return state.locale;
  },
};

// Actions
export interface Actions {
  [ActionTypes.CHANGE_LOCALE](
    context: ActionContext<LocaleState, RootState>,
    locale: string
  ): void;
}

const actions: ActionTree<LocaleState, RootState> & Actions = {
  [ActionTypes.CHANGE_LOCALE](context, locale) {
    I18n.global.locale.value = locale;
    context.commit(MutationTypes.SET_LOCALE, I18n.global.locale);
  },
};

// Mutations
export interface Mutations {
  [MutationTypes.SET_LOCALE](state: LocaleState, locale: string): void;
}

const mutations: MutationTree<LocaleState> & Mutations = {
  [MutationTypes.SET_LOCALE](state, locale) {
    state.locale = locale;
  },
};

export default { state, getters, actions, mutations };

Then I used the store inside a component using the new Vue 3 Composition API:

LocaleSelector.vue

<script lang="ts">
import { useStore } from 'vuex';
import { defineComponent, computed, WritableComputedRef } from 'vue';
import { ActionTypes } from '@/store/locale.module.ts';
import es from '@/assets/icons/es.svg';
import gb from '@/assets/icons/gb.svg';

// Available languages
const langs = [
  {
    value: 'es',
    name: 'Español',
    icon: es,
  },
  { value: 'en', name: 'English', icon: gb },
];

export default defineComponent({
  name: 'LocaleSelector',
  setup() {
    const store = useStore();
    const locale: WritableComputedRef<string> = computed({
      get(): string {
        return store.getters.getLocale;
      },
      set(newLocale: string): void {
        store.dispatch(ActionTypes.CHANGE_LOCALE, newLocale);
      },
    });

    return {
      locale,
      langs,
    };
  },
});
</script>