使用 vue 插件

此页面概述了当前支持的与NativeScript-Vue配合使用的Vue插件。

Vue路由器
Pinia

Vue路由器

目前，与Vue Router的集成是不支持。在团队解决问题之前，请使用人工布线.

Pinia

Pinia是一个国家管理模式和图书馆。它充当应用程序中所有组件的存储，并实现规则以确保状态以可预测的方式发生变化。

安装插件

像往常一样在Vue.js应用程序中安装Pinia。以npm为例：

shell

npm install --save pinia

最新版本的Pinia将添加到您的package.json.

导入插件

打开你的应用程序入口文件（可能app.js,main.js或app.ts)并在顶部添加以下行：

import {createPinia} from "pinia";
const pinia = createPinia();
createApp(Main).use(pinia).start();

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

用法：创建商店

您需要创建一个新的常量来存储您的状态并调用Pinia API调用。您可以在创建Vue实例后在应用程序入口文件中或在单独的文件夹中执行此操作（例如，/store).

在以下示例中，一个简单的存储常数包含计数器的状态并跟踪其变化：

import { defineStore } from "pinia";
export const counterStore = defineStore('counter', {
 state: () => ({
  count: 0,
 }),
 actions: {
  increment() {
   this.count++;
  },
  decrement() {
   this.count--;
  }
 }
});

用法：使用商店

现在，您可以通过调用刚刚创建的存储来管理状态。在以下示例中，当您按下“+”或“-”按钮时，应用程序会跟踪计数值。请注意，您不会操纵状态本身，而是调用操作来递增和递减其值。

Vue

<script lang="ts" setup>
import { computed } from 'nativescript-vue';
import { counterStore } from '~/store/counter';
import { StackLayout } from '@nativescript/core';

const store = counterStore();

const count = computed(() => store.count);

</script>

<template>
  <Page>
    <ScrollView>
      <StackLayout>
        <Button @tap="store.increment()" text="+" />
        <Button @tap="store.decrement()" text="-" />
        <Label :text="count" />
      </StackLayout>
    </ScrollView>
  </Page>
</template>

有关Pinia的更多信息，请参见Pinia文档.

HMR支持

有关HMR支持，请参阅以下文章弗拉季斯拉夫·皮斯库诺夫使用Webpack 5在NativeScript-Vue中实现Pinia的热模块重载（HMR）

使用 vue 插件 ​

Vue路由器 ​

Pinia ​

安装插件 ​

导入插件 ​

用法：创建商店 ​

用法：使用商店 ​

HMR支持 ​