Nuxt Vuex Store with dynamic translation slugs example code

header.vue

  methods: {
    deLocale() {
      if (this.hasPageSlugs) {
        return (
          this.localePath(this.slicedPath, "de") +
          "/" +
          this.currentPageSlugs.de
        );
      }
      return this.switchLocalePath("de");
    },
    enLocale() {
      if (this.hasPageSlugs) {
        return (
          this.localePath(this.slicedPath, "en") +
          "/" +
          this.currentPageSlugs.en
        );
      }
      return this.switchLocalePath("en");
    }
  },
  computed: {
    ...mapState({
      currentPageSlugs: state => state.currentPageSlugs
    }),
    ...mapGetters(["hasPageSlugs"]),
    localeActive() {
      return this.$i18n.locale;
    },
    slicedPath() {
      return this.$route.matched[0].name.substring(
        0,
        this.$route.matched[0].name.lastIndexOf("-")
      );
    }
  }

index.js

import Vuex from "vuex";

const createStore = () => {
  return new Vuex.Store({
    state: () => ({
      currentPageSlugs: null
    }),
    getters: {
      hasPageSlugs: state => {
        return state.currentPageSlugs !== null;
      }
    },
    mutations: {
      setCurrentPageSlugs(state, payload) {
        state.currentPageSlugs = payload;
      },
      resetCurrentPageSlugs(state) {
        state.currentPageSlugs = null;
      }
    }
  });
};

export default createStore;