本页概述了当前支持与 NativeScript-Vue 协同工作的 Vue 插件。

• Vue Router
• Vuex

Vue Router

目前，与 Vue Router 的集成不支持。在团队解决问题之前，请使用手动路由。

Vuex

Vuex 是一种状态管理模式和库。它充当应用程序中所有组件的存储库，并实施规则以确保状态以可预测的方式发生变异。

安装插件

像在 Vue.js 应用程序中一样安装 Vuex。例如，使用 npm

$ npm install --save vuex

最新版本的 Vuex 将被添加到您的 package.json 中。

导入插件

打开您的应用程序入口文件（可能是 app.js、main.js 或 main.ts），并在顶部添加以下行

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

现在您可以使用 Vuex 来管理移动应用程序的状态，类似于您在标准 Vue Web 应用程序中使用它的方式。

用法：创建存储

您需要创建一个新的常量来存储您的状态并调用 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 元素的更多示例，请探索 NativeScript-Vue Groceries 示例的/store 文件夹。