QPANC - Parte 13 - Quasar - Regionalização e Stores
Tags: quasar, postgres, aspnetcore, docker
Published: 2020-04-19 23:38:07

> **QPANC** são as iniciais de **Q**uasar **P**ostgreSQL **A**SP **N**ET **C**ore.

  * [Source](https://github.com/TobyMosque/qpanc)
  * [Introdução](https://dev.to/quasar-pt-br/arquiteturando-uma-aplicacao-com-quasar-postgresql-asp-net-core-e-docker-introducao-o7o)
  * [Parte I - ASP.NET - Inicializando os Projetos](https://dev.to/quasar-pt-br/qpanc-parte-1-asp-net-inicializando-os-projetos-lkm)
  * [Parte 2 - PostgreSQL](https://dev.to/quasar-pt-br/qpanc-parte-2-postgresql-51pb)
  * [Parte 3 - ASP.NET - Registrando Serviços e Lendo Variáveis de Ambiente](https://dev.to/quasar-pt-br/qpanc-parte-3-asp-net-registrando-servicos-e-lendo-variaveis-de-ambiente-3do2)
  * [Parte 4 - ASP.NET - Entity Framework e ASP.NET Core Identity](https://dev.to/quasar-pt-br/qpanc-parte-4-asp-net-entity-framework-e-asp-net-core-identity-40f9)
  * [Parte 5 - ASP.NET - Documentação Interativa com Swagger](https://dev.to/quasar-pt-br/qpanc-parte-5-asp-net-documentacao-interativa-com-swagger-4n0o)
  * [Parte 6 - ASP.NET - Regionalização](https://dev.to/quasar-pt-br/qpanc-parte-6-asp-net-regionalizacao-13p5)
  * [Parte 7 - ASP.NET - Autenticação e Autorização](https://dev.to/quasar-pt-br/qpanc-parte-7-asp-net-autenticacao-e-autorizacao-bpd)
  * [Parte 8 - ASP.NET - CORS](https://dev.to/quasar-pt-br/qpanc-parte-8-asp-net-cors-52dn)
  * [Parte 9 - Quasar - Criação e Configuração do Projeto](https://dev.to/quasar-pt-br/qpanc-parte-9-quasar-criacao-e-configuracao-do-projeto-5hbi)
  * [Parte 10 - Quasar - Configurações e Customizações](https://dev.to/quasar-pt-br/qpanc-parte-10-quasar-configuracoes-e-customizacoes-2i86)
  * [Parte 11 - Quasar - Componentes - Diferença entre SPA e SSR](https://dev.to/quasar-pt-br/qpanc-parte-11-quasar-componentes-diferenca-entre-spa-e-ssr-1a3c)
  * [Parte 12 - Quasar - Serviços](https://dev.to/quasar-pt-br/qpanc-parte-12-quasar-servicos-4e61)
  * [Parte 13 - Quasar - Regionalização e Stores](https://dev.to/quasar-pt-br/qpanc-parte-13-quasar-regionalizacao-e-stores-1kep)
  * [Parte 14 - Quasar - Consumindo a API](https://dev.to/quasar-pt-br/qpanc-parte-14-quasar-consumindo-a-api-fn6)
  * [Parte 15 - Quasar - Login](https://dev.to/quasar-pt-br/qpanc-parte-15-quasar-login-jc6)
  * [Parte 16 - Quasar - Áreas Protegidas](https://dev.to/quasar-pt-br/qpanc-parte-16-quasar-areas-protegidas-3jkn)
  * [Parte 17 - Quasar - Registro](https://dev.to/quasar-pt-br/qpanc-parte-17-quasar-registro-3b8c)
  * [Parte 18 - Docker - Maquina Virtual Linux](https://dev.to/quasar-pt-br/qpanc-parte-18-docker-maquina-virtual-linux-g5c)
  * [Parte 19 - Docker - Registro e Build](https://dev.to/quasar-pt-br/qpanc-parte-19-docker-registro-e-build-31i4)
  * [Parte 20 - Docker - Traefik e Publicação](https://dev.to/quasar-pt-br/qpanc-parte-20-docker-traefik-e-publicacao-3g3d)
  * [Demo Online](https://qpanc.tobiasmesquita.dev)

##27 Configuração do i18n

Agora que já configuramos a persistência dos dados relativos ao cliente, podemos configurar os parâmetros de internacionalização.

Para tal, vá até o boot `i18n` (ele deve ter sido criado durante a criação do projeto, caso não tenha sido, você deverá adiciona-lo agora):

**QPANC.App/src/boot/i18n.js**
```js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from 'src/i18n'
import { Quasar } from 'quasar'

Vue.use(VueI18n)

export default ({ Vue, app, store }) => {
  const fallback = Quasar.lang.isoName
  const locale = store.getters['app/locale'] || fallback
  Quasar.lang.set(locale)
  const i18n = new VueI18n({
    locale: locale,
    fallbackLocale: fallback,
    messages
  })

  app.i18n = i18n
}
```

##28 Troca de Idioma

Para alternar entre um idioma e outro, é bem simples, basta seta o idioma desejado no `i18n` e no `lang` do quasar. iremos construir um componente bem simples, que irá permitir que o usuário escolha o idioma desejado.

Como primeiro passo, iremos adicionar à pasta `statics` alguns ícones, no caso a bandeira do Brasil e a dos Estados Unidos. você pode conseguir estes arquivos no site [Flat Icon](https://www.flaticon.com/packs/countrys-flags)

Então crie a pasta `locale` em `QPANC.App/src/components` e adicione os arquivos `index.js`, `index.vue` e `index.sass`

**QPANC.App/src/components/locale/index.js**
```js
export default {
  name: 'LocaleComponent',
  data () {
    return {
      fab: false
    }
  },
  computed: {
    locale () {
      return this.$store.getters['app/locale']
    },
    icon () {
      return `img:statics/flags/${this.locale}.svg`
    }
  },
  methods: {
    async set (locale) {
      this.$store.commit('app/localeUser', locale)
      this.$i18n.locale = locale
      const lang = await import('quasar/lang/' + locale)
      this.$q.lang.set(lang)
    }
  }
}
```
**QPANC.App/src/components/locale/index.sass**
```sass
.component-locale
  .q-btn--fab .q-btn__wrapper
    padding: 0
    .q-fab__icon-holder,
    img
      width: 56px
      height: 56px
  .q-btn--fab-mini .q-btn__wrapper
    padding: 0
    img
      width: 40px
      height: 40px
```
**QPANC.App/src/components/locale/index.vue**
```html
<template>
  <q-page-sticky position="bottom-right" class="component-locale" :offset="[18, 18]">
    <q-fab v-model="fab" :label="$t('locale.title')" external-label vertical-actions-align="right" :icon="icon" direction="up" >
      <q-fab-action label-position="left" icon="img:statics/flags/pt-br.svg" @click="set('pt-br')" :label="$t('locale.ptbr')" external-label />
      <q-fab-action label-position="left" icon="img:statics/flags/en-us.svg" @click="set('en-us')" :label="$t('locale.enus')" external-label />
    </q-fab>
  </q-page-sticky>
</template>

<script src="./index.js"></script>
<style src="./index.sass" lang="sass"></style>
```

A troca de idioma é realizada no seguinte trecho de código:

```js
    async set (locale) {
      this.$store.commit('app/localeUser', locale)
      this.$i18n.locale = locale
      const lang = await import('quasar/lang/' + locale)
      this.$q.lang.set(lang)
    }
```

Como você deve ter percebido, este componente usa alguns textos localizados, então precisamos atualizar os arquivos `JSON` utilizados pelo `i18n`.

**Quasar.App/src/i18n/en-us/index.js**
```js
export default {
  locale: {
    title: 'Idiom',
    ptbr: 'Portuguese',
    enus: 'English'
  }
}
```
**Quasar.App/src/i18n/pt-br/index.js**
```js
export default {
  locale: {
    title: 'Idioma',
    ptbr: 'Português',
    enus: 'Inglês'
  }
}
```

Agora precisamos registrar este componente, para tal, crie o boot `components`

```
quasar new boot components
```
**QPANC.App/quasar.config.js**
```js
module.exports = function (ctx) {
  return {
    boots: [
      'components'
    ]
  }
}
```
**QPANC.App/src/boot/components.js**
```js
import Vue from 'vue'

Vue.component('locale-switch', () => import('components/locale/index.vue'))
```

E por fim, adicione este componente aos layouts `main` e `clean`

```html
<template>
  <q-layout id="layout-clean" view="lHh Lpr lFf" class="bg-main">
    <!-- ... -->
    <locale-switch></locale-switch>
  </q-layout>
</template>
```

E então podemos executar a aplicação e realizar alguns testes. Como sugestão, abra a tela de Login, envie um usuário/senha incorretos, troque o idioma e tente novamente. A aplicação deverá alternar entre os dois idiomas, assim como a `API` deve retornar os erros no mesmo idioma que a aplicação.

{% vimeo 408201868 %}

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w9m277akx1qiomyfbx3n.gif)

##29 Injetando o Global bus, i18n e router na store

Em uma aplicação `SSR`, como devemos manter o isolamento os serviços e recursos, não podemos exportar e consequentemente importar recursos de forma global.

Porém, é comum que precisemos acessar as rotas, os textos localizados, ou até mesmo emitir e escutar eventos.

Neste caso, podemos criar um arquivo de boot, e injetar estes recursos direto na store.:

```
quasar new boot store
```

E claro, não esqueça de adicionar ele ao `quasar.config.js > boots`. Apenas lembre-se que este `boot` deve ser colocado após o `i18n`.

**QPANC.App/quasar.config.js**
```js
module.exports = function (ctx) {
  return {
    boots: [
      'i18n',
      'store'
    ]
  }
}
```

E agora, a implementação deste boot.:

**QPANC.App/src/boot/store.js**
```js
export default async ({ app, store, router }) => {
  store.$router = router
  Object.defineProperty(store, '$t', {
    get () {
      return app.i18n.t.bind(app.i18n)
    }
  })
  Object.defineProperty(store, '$route', {
    get () {
      return router.route
    }
  })
  Object.defineProperty(store, '$root', {
    get () {
      return router.app.$root
    }
  })
}
```

A partir deste ponto, você pode acessar o `this.$root`, `this.$t`, `this.$router` e `this.$route` de suas `actions`, `mutations` e `getters`.