You are reading docs for v1.3.1, click here for the latest version.
Usando Plugins do Vue

Esta página fornece uma visão geral dos plugins atualmente suportados pelo Vue que funcionam com NativeScript-Vue.

Vue Router

Atualmente, a integração com Vue Router é experimental. Para mais informações, acesse acesse a página do VueRouter.

Notas de uso

A estratégia de roteamento no celular é diferente da estratégia de roteamento no navegador e o formato de roteamento del links familiar do Vue não funciona com NativeScript-Vue.

Em vez disso, você precisa mudar para a nova rota usando o método route.push. O seguinte exemplo mostra como usar o evento tap para mudar a rota.

<Button class="btn btn-primary" @tap="$router.push('/counter')">Counter</Button>

Para uma documentação mais aprofundada sobre roteamento, acesse a página do VueRouter.

Vuex

Vuex é um padrão e biblioteca de gerenciamento de estado do Vue.js. Ele serve como um local de armazenamento para todos os componentes em uma aplicação que implementa regras para garantir que o estado mude de forma previsível. Vuex pode ser usado nos aplicativos NativeScript; um exemplo, veja o NativeScript Groceries Vue.

Instalar

Instale o Vuex como você normalmente faria em seu app Vue.js. Com npm, por exemplo:

$ npm install --save vuex

A versão mais nova do Vuex será adicionada em seu arquivo package.json.

Importar

Abra o arquivo de entrada do seu app (algo como apps.js ou main.js) e adicione o seguinte no topo:

import Vuex from 'vuex'
Vue.use(Vuex)

Agora você pode usar o Vuex no seu app, da mesma forma que você faria em um app Vue padrão da web para gerenciar o estado.

Crie um Store

Acima da nova instância do Vue, ou em uma pasta separada (por exemplo /store na sua pasta app), crie uma nova constante para armazenar seu estado. É aqui que você irá chamar a API do Vuex. Uma simples constante store que inclui o estado do contador que você controla ao longo do seu aplicativo por meio do rastreamento de suas mutações:

const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment: state => state.count++,
      decrement: state => state.count--
    }
})

Use a Store

Agora você pode gerenciar o state chamando a store que você acabou de criar. O exemplo abaixo, o aplicativo rastreia o valor do contador conforme você preciona um botão '+'ou '-'. Note que você não manipula o state em si, mas sim as mutations para incrementar e decrementar seu valor.

new Vue({
  computed: {
    count(){
      return store.state.count
    }
  },

  template: `
    <Page>
      <ScrollView>
        <StackLayout>
          <Button @tap="increment" text="+" />
          <Button @tap="decrement" text="-" />
          <Label :text="count" />
        </StackLayout>
      </ScrollView>
    </Page>
  `,

  methods: {
    increment() {
      store.commit('increment')
    },
    decrement() {
      store.commit('decrement')
    }
  }
}).$start()

Mais informações sobre Vuex e como gerenciar estados, pode ser encontrado na documentação do Vuex. Uma arquitetura boa para gerenciar vários elementos do Vuex, pode ser encontrado no aplicativo Groceries na pasta /store.

Contributors