Это руководство описывает работу плагинов Vue в NativeScript-Vue.

• Vue Router
• Vuex

Vue Router

В настоящий момент интеграция Vue Router находится в экспериментальной стадии. Смотрите подробности на странице Vue Router.

Установка плагина

Для более подробной информации о том, как установить плагин и включить его в вашем приложении NativeScript-Vue, смотрите страницу Vue Router.

Замечания по использованию

Имейте в виду, что маршрутизация на мобильных устройствах не совсем такая же, как в браузере, и знакомый формат Vue маршрутов не работает в NativeScript-Vue.

Вместо этого для смены маршрута вам необходимо использовать метод route.push. Следующий пример показывает, как использовать событие tap для смены маршрута.

<Button class="btn btn-primary" @tap="$router.push('/counter')">Счетчик</Button>

Для более детальной информации об использовании плагина в приложении NativeScript-Vue смотрите страницу VueRouter.

Vuex

Vuex это библиотека управления состоянием. Она служит хранилищем для данных и гарантирует предсказуемое изменение состояния приложения.

Установка плагина

Установка Vuex производится так же, как и для простого Vue-приложения. Например, с использованием npm:

$ npm install --save vuex

Последняя версия Vuex будет добавлена в ваш файл package.json.

Импорт плагина

Откройте ваш входной файл (как правило, app.js или main.js) и добавьте следующую строчку в его начало:

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

Теперь вы можете использовать Vuex точно так же, как в стандартном приложении Vue.

Создание хранилища

Вам необходимо создать новую константу для хранения вашего состояния и вызова Vuex API. Вы можете сделать это во входном файле вашего приложения после создания экземпляра Vue или в отдельной папке (например, /store).

В следующем примере простая константа хранилища содержит состояние счетчика и отслеживает его изменения:

const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment: state => state.count++,
      decrement: state => state.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()

Больше информации о Vuex вы можете найти в официальной документации по Vuex.

Хорошие примеры управления элементами Vuex вы можете найти в приложении Groceries в папке /store.