How to get the Vuex attribute in the route or set the current language of the internationalization i18n after the VUE-CLI route is independent of the JS file

Source: Internet
Author: User
Tags i18n locale

The use of internationalized vue-i18n:

Import vue from ' Vue '; import vuei18n from' vue-i18n ';//Introducing Language PacksImport zh from ' @/common/i18n/zh '; import en from' @/common/i18n/en ';//Multi-languageVue.use (vuei18n);//instantiating a language packConst I18N =Newvuei18n ({locale:' 中文版 ',//language ID, default English  //This . $i 18n.locale//switch locale value to achieve language switchingmessages: {' 中文版 ': en,//English Language Pack' Chinese ': en//Chinese Language Pack}}); Exportdefaulti18n;

Vuex common ways to get properties:

// using in Components and routing pages this. $store. state.xxxx

My directory structure

Router--index.js//exposing the Router object for injection into Vue--a.js//A module routing, Index.js introduction--b.js//b Module Routing, Index.js introduction--c.js//C Module Routing, Index.js introductionStore--index.js//exposing the Vuex object for injection into Vue--statex.js//state and method of component X--statey.js//state and method of component Yi18n--index.js//exposes multi-language objects for injection into Vue--en.js//English Language Pack--zh.js//Chinese Language Pack

My requirement is to a.js in the router to get the data saved in Vuex and to set the i18n language.
Since there is no Vue's this object in A.js, calling methods and getting properties is a problem, as a Vue novice, Baidu still did not find a solution.

After you finally try it out, you can directly introduce Vuex and i18n exposed objects, use them directly in the route, and use the method:

// Router/a.js // introduction of multi-language configuration import i18n from ' @/i18n '; // introduction of VuexImport store from ' @/store '; // i18n Set Language i18n.locale = ' Chinese '; // Vux How to use: // Call Method store.commit (' xxx '); // Gets the property const x = store.state.xxxx;

The above treatment may not be elegant enough to welcome the Great God Guide.

How to get the Vuex attribute in the route or set the current language of the internationalization i18n after the VUE-CLI route is independent of the JS file

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.