使用vuei18n的vueX。this.dispatch无法访问vuei18n

Question

我对Vue比较陌生，我已经阅读了很长一段时间的文档和论坛，希望找到这个问题的解决方案，但还没有找到。我使用的是Vue Webpack模板：here

我正在尝试创建一个应用程序，其中我有一个API端点，以便从浏览器中获取用户的货币和国家以及用户语言。

我在初始化Vue组件时使用this.$store.dispatch('setlanguage')来设置语言的状态，并将其保存到cookie。然而，这里的问题是，我无法更改vuei18n，因为我的应用程序显示它不存在。我使用vuei18n而不是vueXi18n的原因是后者没有numberFormat选项，这是正确设置货币符号所必需的。因此，开始吧：

项目结构：

main.js
App.Vue
 store
   getters.js
   index.js
   mutation-types.js
   mutations.js
 router
   index.js
 lang
   locales
     en.js
     fr.js
     de.js
   lang.js
 components
   LocaleSwitcher.vue
 pages
   Footer.vue
   Home.vue

main.js

import Vue from 'vue'
import VueResource from 'vue-resource'
import Cookies from 'js-cookie'
import App from './App.vue'
import i18n from './lang/lang'
import store from './store'
import router from './router'

Vue.use(VueResource)
Vue.config.productionTip = false

Vue.config.language = Cookies.get('lang')
Vue.config.country = Cookies.get('country')
Vue.config.currency = Cookies.get('cur')

export const localeStrings = {
  en: 'English',
  de: 'Deutsch',
  fr: 'Français',
  it: 'Italiano',
  nl: 'Nederlands',
  sv: 'Svenska',
  es: 'Español',
  ja: '日本語'
}

export const app = new Vue({
  el: '#app',      
  router,
  store,
  i18n: i18n,
  render: h => h(App),
  created () {       
    this.$store.dispatch('setLang', Vue.config.language)
    this.$store.dispatch('setCountry', Vue.config.country)        
  }     
})

lang.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

let i18n = new VueI18n({
  locale: 'en',
  messages: {},
  fallbackLocale: 'en',
  numberFormats: {}
})

export default {i18n}

App.vue

template>
  <div id="app">
    <app-header></app-header>
    <div class="main-content">
      <router-view></router-view>
    </div>
    <app-footer></app-footer>
  </div>
</template>

<script>
export default {
  name: 'myapp',
  components: {    
    'app-footer': Footer
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      language: ''
    }
  }
}
<style>
body {
  margin:0;
  padding:0;
}
</style>

Home.vue

<template>
  <h1>Hello Home! {{msg}}</h1>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Home msg'
    }
  }
}
</script>

<style scoped>
h1 {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
</style>

Footer.vue

<template>
  <footer>
    <p>{{copyright}}</p>
    <local-switcher></local-switcher>
  </footer>
</template>

<script>
import LocaleSwitcher from '../components/LocaleSwitcher.vue'

export default {
  name: 'Footer',
  components: {
    'local-switcher': LocaleSwitcher
  },
  data () {
    return {          
      copyright: 'Copyright 2018 Francesco'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
footer{
  background: lightgrey;
  padding: 10px;
}
</style>

LocaleSwitcher.vue

<template>
  <div class="locale-switcher">
    <select v-model="activeLocale" @change="changeLang">
      <option v-for="(lang, id) in locales" :key="id" v-bind:value="id">{{lang}}</option>
    </select>
</div>
</template>

<script>
import {localeStrings} from '../main'

export default {
  name: 'locale-switcher',
  data: function () {
    return {
      activeLocale: this.$store.getters.getLanguage,
      locales: localeStrings
    }
  }, 
  methods: {   
    changeLang () {
      this.setLang(this.activeLocale)
    },
    setLang (lang) {
      this.$store.dispatch('setLang', lang)
    }
  }
}
</script>

路由器/index.js

import Vue from 'vue'
import Router from 'vue-router'

import p404 from '../pages/error/404.vue'
import Home from '../pages/Home.vue'

Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '*',
    name: '404',
    component: p404
  }  
]

let router = new Router({
  mode: 'history',
  routes
})

// I still have to figure out how to use this to set www.mypage.com/mylanguage/home
// use beforeEach route guard to set the language
router.beforeEach((to, from, next) => {
  // use the language from the routing param or default language
  let language = to.params.lang
  console.log(language)
  console.log('router end')
  if (!language) {
    language = 'en'
  }
  // set the current language for vuex-i18n. note that translation data
  // for the language might need to be loaded first
  // Vue.i18n.set(language)
  next()
})

export default router

store/getters.js

export const getters = {
  getLanguage: state => {
    return state.language
  },
  getCountry: state => {
    return state.country
  },
  getCurrency: state => {
    return state.currency
  }
}

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import { state, mutations, actions } from './mutations'
import { getters } from './getters'

Vue.use(Vuex)

// const mapState = Vuex.mapState
const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

export default store

存储/突变-tyes.js

export const SET_LANG = 'SET_LANG'
export const SET_COUNTRY = 'SET_COUNTRY'
export const SET_CURRENCY = 'SET_CURRENCY'

存储/突变.js

import Vue from 'vue'
import Cookies from 'js-cookie'
import * as types from './mutation-types'
import {app, supportedLocale, supportedCurrencies} from '../main'
import CountryCurrency from '../data/country_currency.json'
import locale2 from 'locale2'

export const state = {
  language: Cookies.get(settings.languageCookie),
  country: Cookies.get(settings.countryCookie),
  currency: Cookies.get(settings.currencyCookie),
  loading: false
}

export const mutations = {
  [types.SET_LANG] (state, payload) {    
    Cookies.set('lang', payload)
    state.language = payload
  },
  [types.SET_COUNTRY] (state, payload) {
    Cookies.set('country', payload)
    state.country = payload
  },
  [types.SET_CURRENCY] (state, payload) {
    Cookies.set('currency', payload)
    state.currency = payload
  }
}

export const actions = {
  async setLang ({commit}, language) {
    console.log(app)
    console.log(Vue)
    var vueMessages = app.$i18n.messages

  var userLocale = 'en'
  var browserLocale = locale2.split('-', 1)[0]
  // testing browser language
  if (locale === undefined) {
    // get browser language
    userLocale = browserLocale
  } else if (browserLocale !== locale) {
    console.log('browser language changed')
    userLocale = browserLocale
  } else {
    userLocale = locale
  }
  // check for supported languages
  if (!supportedLocale.includes(userLocale)) {
    userLocale = 'en'
  }
    if (language in vueMessages) {
      console.log('already in messages')
      commit(types.SET_LANG, language)
    } else if (!supportedLocale.includes(language)) {
      console.log('not supported so commiting default en')
      commit(types.SET_LANG, 'en')
    } else {
      try {
        // you can use fetch or import which ever you want.
        // Just make sure your webpack support import syntax
        // const res = await axios.get(`./src/lang/${payload}.json`)
        const res = await import(`../lang/locales/${language}.json`)
        app.$i18n.locale = language
        app.$i18n.setLocaleMessage(language, res)
        var addNumberFormats = {
          currency: {
            style: 'currency', currencyDisplay: 'symbol', currency: `${app.$i18n.currency}`
          }
        }
        app.$i18n.mergeNumberFormat(language, addNumberFormats)
        Cookies.set('lang', language)
        commit(types.SET_LANG, language)
      } catch (e) {
        console.log(e)
      }
    }
  },
setCountry ({commit}, countryCode) {
    var userCountry = 'NA'
    if (countryCode === undefined || countryCode === 'NA') {
      Vue.http.get('https://www.myapi.com/api/v2/geo/country-code', {
        timeout: 100
      }).then(response => {
        state.country = response.data.code
        Cookies.set('country', response.data.code)
      }, response => {
        // error callback
        state.country = userCountry
        Cookies.set('country', userCountry)
      })
    } else {
      console.log(countryCode)          
      state.country = countryCode
      Cookies.set('country', countryCode)
    }
  },
  setCurrency ({commit}, countryCode) {
    var userCurrency = 'USD'
    console.log('user country ' + countryCode)
    console.log('user currency ' + CountryCurrency[countryCode])
    console.log('currency supported: ' + supportedCurrencies.includes(CountryCurrency[countryCode]))

    if (CountryCurrency[countryCode] && supportedCurrencies.includes(CountryCurrency[countryCode])) {
      userCurrency = CountryCurrency[countryCode]
    }

    Cookies.set('currency', userCurrency)
    app.$i18n.currency = userCurrency

    try {
      var addNumberFormats = {
        currency: {
          style: 'currency', currencyDisplay: 'symbol', currency: `${app.$i18n.currency}`
        }
      }
      if (!app.$i18n.numberFormats[app.$i18n.locale]) {
        console.log('merge currency')
        app.$i18n.setNumberFormat(app.$i18n.locale, addNumberFormats)
      }
    } catch (error) {
      console.log(error)
    }
  }
}

问题是，一旦加载，我就无法访问应用程序vue i18n。我是不是访问不正确，或者有没有其他方法可以添加语言和货币设置？我希望我已经提供了足够的信息，谢谢！

Answer 1

这个答案可能与你的案例相关吗？https://stackoverflow.com/a/45460729/2964531

如果您需要访问或更改i18n的属性，可以直接从store/mutuations.js导入