Added a global store to save current language and started using Localstorage to persist selected language.

src/components/atoms/LocaleChanger.vue

@@ -2,7 +2,8 @@
   <v-col cols="1" md="2">
     <!-- Desktop -->
     <v-select
-      v-model="lang"
+      :value="lang" 
+      @input="updateLang" 
       class="pt-7 hidden-sm-and-down"
       prepend-inner-icon="mdi-translate"
       :items="languages"
@@ -31,7 +32,7 @@
             v-for="(item, index) in languages"
             :key="index"
             link
-            @click="lang = item.value"
+            @click="updateLang(item.value)" 
           >
             <v-list-item-title>{{ item.label }}</v-list-item-title>
           </v-list-item>
@@ -42,6 +43,8 @@
 </template>
 
 <script>
+import { mapActions, mapGetters } from 'vuex';
+
 export default {
   data() {
     return {
@@ -57,14 +60,25 @@ export default {
         { label: 'Русский', value: 'ru' },
         { label: '日本語', value: 'ja' }
       ],
-      lang: this.$i18n.locale,
-    }
+    };
+  },
+
+  computed: {
+    ...mapGetters('Language', ['lang']),
   },
-  watch: {
-    lang: function (newValue) {
-      this.$i18n.locale = newValue
+
+  methods: {
+
+    ...mapActions('Language', ['setLang']), 
+
+    updateLang(newLang) {
+      this.setLang(newLang);
+      this.$i18n.locale = newLang; 
     },
   },
-}
-</script>
 
+  mounted() {
+    this.$i18n.locale = this.lang;
+  },
+};
+</script>

src/store/index.js

@@ -1,63 +1,64 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import Auth from '@/store/modules/Auth'
-import Templates from '@/store/modules/Template'
-import Tests from '@/store/modules/Test'
-import Users from '@/store/modules/User'
-import Database from '@/store/modules/Database'
-import Cooperators from '@/store/modules/Cooperators'
-import Reports from '@/store/modules/Reports'
-import Heuristic from '@/store/modules/Heuristic'
-import Answer from '@/store/modules/Answer'
+import Vue from 'vue';
+import Vuex from 'vuex';
+import Auth from '@/store/modules/Auth';
+import Templates from '@/store/modules/Template';
+import Tests from '@/store/modules/Test';
+import Users from '@/store/modules/User';
+import Database from '@/store/modules/Database';
+import Cooperators from '@/store/modules/Cooperators';
+import Reports from '@/store/modules/Reports';
+import Heuristic from '@/store/modules/Heuristic';
+import Answer from '@/store/modules/Answer';
+import Language from '@/store/modules/Language'; 
 
-
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 export default new Vuex.Store({
-    state:{
-        loading:false,
-        error:null,
-        dialogLeave:false,
-        localChanges:false,
-        pathTo:null,
+  state: {
+    loading: false,
+    error: null,
+    dialogLeave: false,
+    localChanges: false,
+    pathTo: null,
+  },
+  mutations: {
+    setLoading(state, payload) {
+      state.loading = payload;
+    },
+    setError(state, payload) {
+      state.error = {
+        errorCode: payload.errorCode,
+        message: payload.message,
+      };
+    },
+    SET_DIALOG_LEAVE(state, payload) {
+      state.dialogLeave = payload;
+    },
+    SET_LOCAL_CHANGES(state, payload) {
+      state.localChanges = payload;
     },
-    mutations: {
-        setLoading(state, payload) {
-          state.loading = payload
-        },
-        setError(state, payload) {
-          state.error = {
-            errorCode: payload.errorCode,
-             message: payload.message,
-            }
-        },
-        SET_DIALOG_LEAVE(state,payload){
-          state.dialogLeave = payload
-        },
-        SET_LOCAL_CHANGES(state,payload){
-          state.localChanges = payload
-        },
-        SET_PATH_TO(state,payload){
-          state.pathTo = payload
-        },
+    SET_PATH_TO(state, payload) {
+      state.pathTo = payload;
     },
-    getters:{
-      getDialogLeaveStatus(state){
-        return state.dialogLeave
-      },
-      localChanges(state){
-        return state.localChanges
-      },
+  },
+  getters: {
+    getDialogLeaveStatus(state) {
+      return state.dialogLeave;
     },
-    modules: {
-      Auth,
-      Templates,
-      Tests,
-      Users,
-      Database,
-      Cooperators,
-      Reports,
-      Heuristic,
-      Answer,
+    localChanges(state) {
+      return state.localChanges;
     },
-})
+  },
+  modules: {
+    Auth,
+    Templates,
+    Tests,
+    Users,
+    Database,
+    Cooperators,
+    Reports,
+    Heuristic,
+    Answer,
+    Language, 
+  },
+});

src/store/modules/Language.js

@@ -0,0 +1,28 @@
+const state = {
+  lang: localStorage.getItem('lang') || 'en', 
+};
+
+const mutations = {
+  SET_LANG(state, lang) {
+    state.lang = lang;
+    localStorage.setItem('lang', lang); // Persist language in localStorage
+  },
+};
+
+const actions = {
+  setLang({ commit }, lang) {
+    commit('SET_LANG', lang);
+  },
+};
+
+const getters = {
+  lang: (state) => state.lang,
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+};