VUEX CON VUEI18N. Esto.Dispatch no es capaz de acceder a VUEI18N -- javascript campo con ecmascript-6 campo con vuejs2 camp Relacionados El problema

vueX with vuei18n. this.dispatch is not able to access vuei18n


0
vote

problema

Español

Soy relativamente nuevo en VUE y he estado leyendo la documentación y los foros durante bastante tiempo para una solución a este, pero aún no lo he encontrado. Estoy usando la plantilla VUE WEBPACK: aquí

Estoy tratando de crear una aplicación donde tengo un punto final de API para obtener la moneda y el país para el usuario, así como el idioma del usuario del navegador.

Estoy usando esto. $ store.dispatch ('setlanguage') en la inicialización del componente VUE para establecer el estado del idioma y guardarlo a una cookie. Sin embargo, el problema aquí es que no puedo alterar el VUEI18N, ya que mi aplicación dice que no existe. La razón por la que estoy usando VUEI18N en lugar de VUEXI18N es porque este último no tiene las opciones de NumberFormat y esto es necesario para establecer correctamente los símbolos de la moneda. Así que para empezar las cosas:

Estructura del proyecto:

  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>   

enrutador / 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   

tienda / getters.js

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

tienda / 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   

TIPO DE TIENDA / MUTACIÓN-TIPOS.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)           }      }) 0  

Tienda / Mutations.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)           }      }) 111  

El problema es que una vez cargado, no puedo acceder a la aplicación VUE I18N. ¿Estoy accediendo incorrectamente o hay otra forma de agregar la configuración de lenguaje y moneda a esto? Espero haber proporcionado suficiente información gracias!

Original en ingles

I am relatively new to Vue and I've been reading the documentation and forums for quite a while for a solution to this one but haven't found it yet. I am using the Vue Webpack template: here

I'm trying to create an app where I have an API endpoint to get the currency and country for the user as well as the user language from the browser.

I am using this.$store.dispatch('setlanguage') on initialisation of the Vue Component to set the state of the language, and save it to a cookie. The problem here though is that I am unable to alter the vuei18n as my app says it does not exist. The reason I am using vuei18n instead of vueXi18n is because the latter does not have the numberFormat options and this is needed in order to set correctly the currency symbols. So to get things started:

Project structure:

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: 'Franxc3xa7ais',   it: 'Italiano',   nl: 'Nederlands',   sv: 'Svenska',   es: 'Espaxc3xb1ol',   ja: 'xe6x97xa5xe6x9cxacxe8xaax9e' }  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> 

router/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 

store/mutation-types.js

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

store/mutations.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)     }   } } 

The problem is that once loaded, I cannot access the app vue i18n. Am I accessing it incorrectly or is there another way to add language and currency settings to this? I hope I have provided enough info Thanks!

        

Lista de respuestas

0
 
vote

¿Podría esta respuesta ser relevante en su caso? https://stackoverflow.com/a/45460729/2964531

Si necesita acceder o mutar las propiedades de I18N, puede importarlo directamente desde Tienda / Mutations.js

 

Could this answer be relevant in your case? https://stackoverflow.com/a/45460729/2964531

If you need to access or mutate properties of i18n, you can import it directly from store/mutations.js

 
 
 
 

Relacionados problema

0  VUE-router ¡Enlace con el parámetro (error en la actualización?)  ( Vue router linking with parameter error on refresh ) 
¿Por qué cuando me dirija a un "enlace enrutador" a un componente con un parámetro, el parámetro funciona, pero luego cuando actualice la página no lo hace? (...

19  VUE SOUTE COLPSE TRANSICIÓN EN V-SI  ( Smooth vue collapse transition on v if ) 
Estoy luchando con las transiciones VUE que intentan mostrar / ocultar contenido usando V-si está sin problemas. Si bien entiendo las clases y transiciones de...

0  Tratando de capturar eventos en vue.js 2, pero sin éxito  ( Trying to capture events on vue js 2 but without success ) 
Tengo un problema con la captura de eventos con VUE.JS 2. Estoy usando un autobús de evento para emitir y capturar el evento. En este bloque de código, escr...

1  Uso de Kazupon / VUE-I18N dentro de un estado de VUEX  ( Using kazupon vue i18n inside a state of vuex ) 
usando https://github.com/kazupon/vue-i18n para la localización vue.t () || $ t () || trans () Recibir una cadena que es una clave para traducir por VU...

4  ¿Cómo puedo agregar 2 condición en una clase VUE.JS 2?  ( How can i add 2 condition in one class vue js 2 ) 
Mi componente VUE es así: <template> <a :class="'btn ' + [respond == 'responseFound' ? ' btn-yellow' : ' btn-default', type == 1 ? ' btn-block' : ' btn...

53  Cambiar la URL base predeterminada para Axios  ( Change the default base url for axios ) 
He configurado mis Axios como este const axiosConfig = { baseURL: 'http://127.0.0.1:8000/api', timeout: 30000, }; Vue.prototype.$axios = axios.create(...

0  ¿Cómo obtener código fuente del archivo compilado de VUEJS?  ( How to get source code from compiled file of vuejs ) 
Perdí mi código fuente de VUEJS debido a la caída del portátil. Tengo archivos que son compilados por VUEJS. ¿Es posible obtener un código fuente del archivo ...

1  Estado intermedio o algo similar en VUE  ( Intermediate state or something similar in vue ) 
Estoy tratando de obtener un mensaje de texto para desplazarse horizontalmente, verticalmente o permanecer fijo según el espacio, las necesidades de texto act...

1  onclick múltiples elementos en Vue JS  ( Onclick multiple elements in vue js ) 
Estoy creando una función para ocultar y mostrar la descripción de las miniaturas de la imagen (si el usuario hace clic en la miniatura de la imagen, la descr...

0  $ event.target.select () no funciona en algunos navegadores, incluyendo Safari  ( Event target select is not working on some browsers including safari ) 
text content1111 no está funcionando en algunos navegadores que incluyen Safari text content2 ¿Cómo puede ser arreglado? ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos