Esta seccioón provee un resumen de los plugins de Vue que funcionan con NativeScript-Vue.

• Vue Router
• Vuex

Vue Router

Actualmente, la integracion con Vue Router esta en modo experimental. Para más información puedes ver la sección Vue Router.

Instalar y registrar el plugin

Para una información detallada de como instalar el plugin y disponerlo en tu aplicación NativeScript-Vue, lee la sección Vue Router

Notas de uso

La estrategia de routing para móviles es diferente a la estrategia utilizada en el navegador y el formato estandard de las rutas de Vue no funciona con NativeScript-Vue

En su lugar, lo que necesitas para cambiar a una nueva ruta es método route.push. El siguiente ejemplo muestra como usar el evento tap para cambiar de ruta:

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

Vuex

Vuex es una libreria que se encarga de resolver el patron de manejo de estado, que básicamente sirve como un almacenamiento centralizado para todo los componentes de nuestra aplicación e implementa reglas para asegurarse que el estado (la información) se modifique de una manera predecible.

Instalar el plugin

Intala Vuex de la misma forma que lo harias en cualquier aplicación de Vue.js usando npm:

$ npm install --save vuex

Importar el plugin

Abre el archivo principal de tu aplicación (entry file, comunmente llamado app.js o main.js) y luego agrega las siguientes lineas al comienzo del archivo:

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

Una vez que hayas hecho esto, vas a poder disponer de Vuex para manejar el estado de tu aplicación móvil de forma muy similar a la implementada en tus aplicaciones web basadas en Vue.

Uso: Crear el store

Necesitas crear una nueva constante que representa al estado e invoca las llamadas a la API de Vuex. Puedes hacer esto en el archivo de entrada de tu aplicación (luego de la declaración de la instancia de Vue) o en un nuevo directorio (generalmente llamado /store).

En el siguiente ejemplo, la constante store, incluye el estado de un contador y registra sus mutaciones:

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

Uso: Usar el store

Ahora puedes manejar el estado de la aplicación, llamando al store que acabas de crear. En el siguiente ejemplo, la app registra los cambios de la propiedad count a medida que presionamos los botons + o -. Ten en cuenta que no esta cambiando el estado de forma directa, sino con llamadas a las mutations que permiten incrementar/decrementar el valor de count.

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()

Para más información sobre el funcionamiento de Vue, puedes ver la documentación oficial.

Para más informacion sobre como manejar elementos de Vuex, explora el directorio /store de la aplicación de ejemplo NativeScript-Vue Groceries.