Vue-i18n：如何保存选定的语言环境

Question

在vue上有一个连接了i18n库的站点。有一个用于切换语言的按钮。

<div class="locale-changer">
    <v-menu  v-model="changeLocaleState" offset-y>
      <template v-slot:activator="{ on }">
        <v-btn
          color="primary"
          dark
          v-on="on"
        />
      </template>
      <v-list>
        <v-list-tile
          v-for="(lang, i) in langs"
          :key="`lang.lacale${i}`"
          :value="lang.locale"
          @click="$i18n.locale = lang.locale"
        >
          <v-list-tile-title><img :src="lang.img">{{ lang.locale }}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>

    export default {
  name: 'VeLanguageSwitcher',
  data () {
    return { langs: [
      {
        name: 'en',
        locale: 'en-US',
        img: '/assets/img/flag/GB.png'
      },
      {
        name: 'ru',
        locale: 'ru-RU',
        img: '/assets/img/flag/RU.png'
      }
    ] }
  },
  computed: {
    changeLocaleState: {
      get () {
        return this.$store.state.ui.changeLocale
      },
      set (val) {
        this.$store.commit('ui/setChangeLocale', val)
      }
    }
  }
}
</script>

选定的语言环境不会保存。从理论上讲，我知道在选择一种语言时，您可以在vuex中进行SET，然后GET在按钮内显示当前语言环境的图片，但是我不知道该怎么做