` や ``といった要素が存在しません。その代わりにインターフェースを描写するために使用できる[コンポーネント群](https://docs.nativescript.org/ui/components)を知る必要があります。 + +でも、心配しないでください。NativeScript-Vueで開発するには学習曲線がありますが、多くのことがiOSやAndroidについて一から学ぶよりもかなり容易であることに気づくでしょう。結局、あなたはソースコードをJavaScriptとVueで書くことになるのです。 + +## 関わりたい? + +NativeScript-Vueはオープンソースのプロジェクトで、コントリビューターを熱烈に歓迎しています。ぜひ[project’s contributing guide](https://github.com/nativescript-vue/nativescript-vue/blob/master/CONTRIBUTING.md)を見て、 ** [NativeScript Community Slack](https://developer.telerik.com/wp-login.php?action=slack-invitation)の#vueチャンネルに入ってください。**. + +## このプロジェクトはどの程度安定しているのか? + +NativeScript-Vueは比較的、基本仕様の実装完了といったところです。現在、私達は2つの事柄に焦点を当てています: + +* **ドキュメンテーション**: NativeScript-Vueで行える全てのことが、このサイトのドキュメントに載っているわけではありません。私達は活発にサンプルとユースケースをこのサイトに追加していて、貢献は大歓迎です。 +* **サンプルアプリ**: 私達は、このプラグインの性能を試してフィードバックをくれる人を探しています。もし興味があれば、 [NativeScript Community Slack](https://developer.telerik.com/wp-login.php?action=slack-invitation) に入って#vueチャンネルで知らせてください。 diff --git a/content/index_ja.ejs b/content/index_ja.ejs index fbb4c356..d647bbb0 100644 --- a/content/index_ja.ejs +++ b/content/index_ja.ejs @@ -1,6 +1,6 @@ --- layout: landing.ejs -dest: index.html +dest: ja/index.html locale: ja --- @@ -8,15 +8,15 @@ locale: ja

本当のネイティブアプリを、 Vue.js と NativeScriptを使って作ろう。

本物のネイティブアプリを、Vue.jsとNativeScriptを使って作ろう。

新しい言語を習得する手間をかけずにアプリをリリースしたいと夢見たことはありますか？ - そんなあなたには、NativeScript-Vue がぴったりです! + そんなあなたには、NativeScript-Vueがぴったりです!

- はじめる @@ -36,7 +36,7 @@ locale: ja

使い始めるのは簡単。

- NativeScript-Vue を使い始めるのはとても簡単で、依存関係は　npm を通してインストールするだけで解決可能です。 + NativeScript-Vue を使い始めるのはとても簡単で、依存関係はnpmを通してインストールするだけで解決可能です。

@@ -44,7 +44,7 @@ locale: ja

親しみやすいシンタックス。

- NativeScript-Vue は、Vue.jsで親しんだシンタックスが使えることを目指しています。 + NativeScript-Vueは、Vue.jsで親しんだシンタックスが使えることを目指しています。

From c31260e74c312b4a3536d730e94a757164cfc1e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E5=80=89=E5=84=AA=E6=82=9F?= Date: Thu, 31 Jan 2019 00:16:59 +0900 Subject: [PATCH 03/26] add japanese docs of actionBar --- .../docs/ja/elements/action-bar/action-bar.md | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 content/docs/ja/elements/action-bar/action-bar.md diff --git a/content/docs/ja/elements/action-bar/action-bar.md b/content/docs/ja/elements/action-bar/action-bar.md new file mode 100644 index 00000000..839652b3 --- /dev/null +++ b/content/docs/ja/elements/action-bar/action-bar.md @@ -0,0 +1,59 @@ +--- +title: ActionBar +apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar +contributors: [Spice-Z] +--- + +``は画面上部にツールバーを提供するためのUIコンポーネントです。 + +このコンポーネントはAndroidの[app bar](https://developer.android.com/training/appbar/)、iOSの[navigation bar](https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/)をNativeScriptが抽象化したものです。 + +--- + +#### タイトルを使う + +```html + +``` + +#### タイトルの見た目をカスタマイズして使う + +```html + + +

+ + + +``` + +#### Android用にアプリのアイコンを設定する + +```html + +``` + +#### 枠線を無くす + +デフォルトでは、枠線が``の下に描かれています。枠線に加えて、iOSデバイスでは透過フィルターが``に適用されています。 + +このスタイリングを無くすには、 `flat`プロパティを`true`に設定します。 + +```html + +``` + +## プロップス + +| 名前 | 型 | 説明 | +|------|------|-------------| +| `title` | `String` | バーに表示されるタイトルを設定します。 +| `android.icon` | `String` | Androidデバイス上で表示されるアイコンを設定します。 +| `android.iconVisibility` | `String` | Androidデバイス上でのアイコンの表示/非表示を設定します。 +| `flat` | `boolean` | Androidでは枠線を無くし、iOSでは透過フィルターを無くします。. デフォルトの値は`false`です。 + +## ネイティブコンポーネント + +| Android | iOS | +|---------|-----| +| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationBar`](https://developer.apple.com/documentation/uikit/uinavigationbar) \ No newline at end of file From b17a33bbbb99056ffb06d9815828f18cbd3405e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E5=80=89=E5=84=AA=E6=82=9F?= Date: Thu, 31 Jan 2019 02:06:56 +0900 Subject: [PATCH 04/26] add japanese docs of quick start --- .../docs/ja/getting-started/1-quick-start.md | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 content/docs/ja/getting-started/1-quick-start.md diff --git a/content/docs/ja/getting-started/1-quick-start.md b/content/docs/ja/getting-started/1-quick-start.md new file mode 100644 index 00000000..14b86ec0 --- /dev/null +++ b/content/docs/ja/getting-started/1-quick-start.md @@ -0,0 +1,40 @@ +--- +title: クイックスタート +contributors: [Spice-Z] +--- + +もしNativeScript-Vueを扱う前にインストールと設定で煩わされたくないのなら、[NativeScript Playground](/en/docs/getting-started/playground-tutorial)がぴったりです。 + +ですがもし、[すでにあなたの開発環境をネイティブアプリの開発向けに準備している](/en/docs/getting-started/installation)のなら、[vue-cli-template](https://github.com/nativescript-vue/vue-cli-template)を使うことによって始めることができます: + +**サポートしている機能** + +- `.vue` 単一ファイルコンポーネント +- Vuex—状態管理 (必要ならば) +- NativeScriptのテーマ +- プリセットアプリケーション + +```shell +$ npm install -g @vue/cli @vue/cli-init +$ vue init nativescript-vue/vue-cli-template +$ cd +$ +$ npm install +$ # もしくは +$ yarn install +$ +$ tns run android --bundle +$ # もしくは +$ tns run ios --bundle +$ +$ # 新しいHMRモードを、--bundle を --hmrに書き換えることによって試すことができます。 +$ # ただ、ベータ版の機能だと気を留めておいてください。 +``` + +この一連のコマンドは、システム上で以下のオペレーションを実行します。 + +1. 最新のVue CLIをインストールして、Vue CLI 2.xのテンプレートを`@vue/cli-init`アドオンを通してサポート +2. [vue-cli-template](https://github.com/nativescript-vue/vue-cli-template)を使ったプロジェクトの作成 +3. 新しく作られたプロジェクトのディレクトリに移動 +4. npmの依存ファイルをローカルインストール +5. プロジェクトをビルドして、指定したプラットフォームの任意の繋がれた実機かインストール済みのエミュレータで実行する。`--bundle` オプションは`.vue`ファイルをコンパイルして変更を監視するwebpack buildのトリガーとなります。 From 30a66a86d458ab257b3090da0e0316c258a8dec8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E5=80=89=E5=84=AA=E6=82=9F?= Date: Mon, 18 Feb 2019 00:49:45 +0900 Subject: [PATCH 05/26] update japanese translate --- .../docs/ja/getting-started/1-quick-start.md | 2 +- .../docs/ja/getting-started/3-installation.md | 47 +++++ .../ja/getting-started/4-upgrade-guide.md | 199 ++++++++++++++++++ .../docs/ja/getting-started/5-vue-devtools.md | 73 +++++++ .../getting-started/6-nativescript-plugins.md | 45 ++++ 5 files changed, 365 insertions(+), 1 deletion(-) create mode 100644 content/docs/ja/getting-started/3-installation.md create mode 100644 content/docs/ja/getting-started/4-upgrade-guide.md create mode 100644 content/docs/ja/getting-started/5-vue-devtools.md create mode 100644 content/docs/ja/getting-started/6-nativescript-plugins.md diff --git a/content/docs/ja/getting-started/1-quick-start.md b/content/docs/ja/getting-started/1-quick-start.md index 14b86ec0..f1edface 100644 --- a/content/docs/ja/getting-started/1-quick-start.md +++ b/content/docs/ja/getting-started/1-quick-start.md @@ -5,7 +5,7 @@ contributors: [Spice-Z] もしNativeScript-Vueを扱う前にインストールと設定で煩わされたくないのなら、[NativeScript Playground](/en/docs/getting-started/playground-tutorial)がぴったりです。 -ですがもし、[すでにあなたの開発環境をネイティブアプリの開発向けに準備している](/en/docs/getting-started/installation)のなら、[vue-cli-template](https://github.com/nativescript-vue/vue-cli-template)を使うことによって始めることができます: +ですがもし、[すでにあなたの開発環境をネイティブアプリの開発向けに準備している](/ja/docs/getting-started/installation)のなら、[vue-cli-template](https://github.com/nativescript-vue/vue-cli-template)を使うことによって始めることができます: **サポートしている機能** diff --git a/content/docs/ja/getting-started/3-installation.md b/content/docs/ja/getting-started/3-installation.md new file mode 100644 index 00000000..26cbbbbb --- /dev/null +++ b/content/docs/ja/getting-started/3-installation.md @@ -0,0 +1,47 @@ +--- +title: インストール +contributors: [Spice-Z] +--- + +NativeScript-Vueを使うためには、アプリをコンパイルできるようにローカルの開発環境を整える必要があります。 + +## 事前に準備が必要なこと + + - [Node.js](#nodejs) + - [NativeScript CLI](#nativescript-cli) + - [Windows](#windows) + - [macOS](#macos) + - [Linux](#linux) + +### Node.js + +最新の_LTS_バージョンのNode.jsを[https://nodejs.org/](https://nodejs.org/)からダウンロード・インストールしてください。ターミナルを再起動して`node --version`コマンドを実行し、インストールが成功したことを確かめて下さい。 + +### NativeScript CLI + +NativeScript CLIをインストールするには、ターミナルを開いて以下のコマンドを実行して下さい: + +```shell +$ npm install -g nativescript +``` + +ターミナルで`tns`コマンドを実行し、インストールが成功したことを確かめて下さい。 +利用できるコマンドの一覧が表示されるはずです。 + +### Windows + +Check the system requirements 必要なシステム要件を確認して、Windows向けのAndroid SDKセットアップの説明に従って下さい: + +[Advanced setup: Windows](https://docs.nativescript.org/start/ns-setup-win) + +### macOS + +Check the system requirements 必要なシステム要件を確認して、XcodeとmacOS向けのAndroid SDKセットアップの説明に従って下さい: + +[Advanced setup: macOS](https://docs.nativescript.org/start/ns-setup-os-x) + +### Linux + +必要なシステム要件を確認して、Linux向けのAndroid SDKセットアップの説明に従って下さい: + +[Advanced setup: Linux](https://docs.nativescript.org/start/ns-setup-linux) \ No newline at end of file diff --git a/content/docs/ja/getting-started/4-upgrade-guide.md b/content/docs/ja/getting-started/4-upgrade-guide.md new file mode 100644 index 00000000..cf877a8c --- /dev/null +++ b/content/docs/ja/getting-started/4-upgrade-guide.md @@ -0,0 +1,199 @@ +--- +title: 更新のガイド +contributors: [Spice-Z] +outdated: false +--- + +> 更新にかかる時間: **10-20分**. + +INativeScript-VueのアプリをVue-CLIの1.3.1バージョンのテンプレートで作成しているのなら、今こそ新しい2.0バージョンへ更新する時です。このガイドが役に立つでしょう。 + +## 更新の概要 + +新しいテンプレートは異なるフォルダ構成です: + +![New folder structure](/screenshots/old-new-folder-structure.png) + +単純化した更新の過程は以下を含みます: + +1. 更新したテンプレートから新しいプロジェクトを作成する。 +2. 古いアプリから新しいアプリへファイルをコピーする。 +3. ファイルを組み換えて、いくつかファイルを追加する。 + +## ステップ1: 新しいアプリの作成 + +新しいアプリを作るためにVue-CLIテンプレートを使います。古いバージョンで使えていた事前にインストールしたコマンド仕様できることを確かめてください。例えば、もし初めにCLIでVuexをインストールしていたのなら、インストールを今一度してください。 + +Vue-CLIテンプレートから新しいプロジェクトを作成するために以下のコマンドを実行してください。 + +```shell +$ npm install -g @vue/cli @vue/cli-init +$ vue init nativescript-vue/vue-cli-template +$ cd +$ npm install +$ tns run android --bundle +$ # or +$ tns run ios --bundle +``` + +## ステップ2: `App_Resources`を入れ替える + +初めに、古いアプリの`./template/app/`にある`App_Resources`フォルダをコピーして下さい。次に、新しいアプリの`app`フォルダへそれを貼り付けて下さい。新しい`App_Resources`フォルダが置き換わっていることを確認して下さい。 + +## ステップ3: `src`フォルダと`app`フォルダを結合する + +古いアプリの`src`内の全てのフォルダをコピーして、新しいアプリのフォルダの中へ貼り付けてください。 + +もしカスタムフォントを使っているなら、`src/assets/fonts`フォルダの中身を`app/fonts`へ移動させてください。これで、NativeScriptがカスタムフォントを自動的にロードすることになります。 + +## ステップ4: `main.js`の編集 + +`main.js`のVue initializationブロックを以下のように編集してください block to resemble: + +```js +new Vue({ + render: h => h('frame', [h(HelloWorld)]), +}).$start(); +``` + +NativeScript4.0は2つの大きな変更があります: + +* 新しい``エレメント +* 共通のビューエレメントをページをまたいで共有することが可能な、ルートエレメントを変更する新しい方法(ナビゲーション)。 + +NativeScript 4.0以前では、ルート要素はアプリがスタートする際にNativeScriptによって暗に作成される``エレメントでした。 + +最新の変更では、``と``エレメントはもう自動的に作成されません。なので、NativeScript-Vue 2.0.0からは,テンプレートにこれらのエレメントを明示的に追加する必要があります。 + +単一のルート``を持つという以前の動作を維持するためのは、ルートVueインスタンスを変更し``と``エレメントを持つようにすることで可能になります。 + +**例: ``と``をテンプレートに追加する** + +```JavaScript +// 古いバージョンの中では +// このコードは自動的にページを作る +new Vue({ + template: `` +}).$start() +``` + +```JavaScript +// NativeScript-Vue 2.0.0では +// とがテンプレートの中に存在しなければならない +new Vue({ + template: ` + + + + + + ` +}).$start() +``` + +このようにすることで、異なるページでエレメントを共通化することができます。 + +**例: 共通化された``エレメントをしようする** + +```js +new Vue({ + template: ` + + ... + + + + + + + ` +}).$start() +``` + +## Step 5: パスの編集 + +フォルダ構成が変化したため、新しいアプリの中でスタイル、フォント、画像を指すパスを編集しなければなりません。 + +**例: 画像の参照を変更する** + +古いアプリでは、画像の参照を以下のように行っていました。 + +```HTML +

+``` + +NativeScriptが画像を読み込むことを確認するため、パスを以下のように変更して下さい。 + +```HTML +

+``` + +## (必要な場合)ステップ6: 手動で設定したルーティングでのプロップスの修正 + +もしアプリで手動のルーティングを使っているのなら、プロップスを渡すためのシンタックスが変を変えます。全てのプロジェクトでこの変更が必要ではないことに注意して下さい。 + +古いシンタックスはこのようになっていました。 + +```JavaScript +this.$navigateTo(NewPage, { + transition: {}, + transitionIOS: {}, + transitionAndroid: {}, + + context: { + propsData: { + name: this.name, + value: this.value + } + } + }); +``` + +新しいアプリで手動ルーティングの挙動を保存するために、シンタックスを以下のように変えて下さい: + +```JavaScript +this.$navigateTo(NewPage, { + transition: {}, + transitionIOS: {}, + transitionAndroid: {}, + + props: { + name: this.name, + value: this.value + } + }); +``` + +## ステップ7: `package.json`を作成する + +関係のある値を、古いアプリのルートにある`package.json`ファイルから、新しいアプリのルートにある`package.json`ファイルへコピーして下さい。 + +おそらく`Dependencies:`ブロックのコピーと、ある場合には`package.json`のトップにある新しいアプリのバージョンとdescriptionを書き直す必要があるでしょう。 + +## Step 8: 削除と実行 + +新しいアプリのフォルダを空にして依存ファイルをインストールし直すために以下のコマンドを実行してください。 + +```shell +$ cd +$ rm -rf platforms +$ npm install +$ tns run android --bundle +$ # or +$ tns run ios --bundle +``` + +## (オプション) ステップ8: HMRを試す + +現在NativeScriptは(Hot Module Replacement)のサポートを提供しています。同じように、最新のNativeScript-Vueはすぐに使えるHMRのサポートをしていますが、NativeScript CLIを必要とします。 + +最新で最高なバージョンのNativeScript CLIをインストールしてHMRのサポートを利用するために、以下のコマンドを実行してください。 + +```shell +$ npm install -g nativescript@next +$ cd +$ rm -rf platforms +$ tns run android --hmr +$ # or +$ tns run ios --hmr +``` diff --git a/content/docs/ja/getting-started/5-vue-devtools.md b/content/docs/ja/getting-started/5-vue-devtools.md new file mode 100644 index 00000000..bf02280f --- /dev/null +++ b/content/docs/ja/getting-started/5-vue-devtools.md @@ -0,0 +1,73 @@ +--- +title: Vue DevToolsの使用 +contributors: [Spice-Z] +outdated: false +--- + +独立したバージョンのVue DevToolsを用いてNativeScript-Vueのアプリをデバッグすることができます。 + +統合を簡単にするためには、アプリとVue DevToolsの連携を助けてくれる[`nativescript-vue-devtools`](https://github.com/nativescript-vue/nativescript-vue-devtools)プラグインを使用できます。 + +## ステップ1: 依存ファイルのインストール + +以下のコマンドを実行してください: + +```shell +$ cd +$ npm install --save @vue/devtools@beta nativescript-toast nativescript-socket.io nativescript-vue-devtools +``` + +## (オプション) ステップ2: Vue DevToolsのグローバルインストール + +Vue DevToolsへのアクセスを簡単にするために、パッケージをグローバルにインストールすることもできます。 + +以下のコマンドを実行してください: + +```shell +$ npm install -g @vue/devtools@beta +``` + +インストール終了後、開発に使用している機械のどこからでも`vue-devtools`コマンドを実行することができます。 + +## ステップ3: `nativescript-vue-devtools`プラグインをアプリにインストールする + +アプリとVue DevToolsを連携するため、`main.js`を修正する必要があります。 + +ソースコードの中で、`nativescript-vue-devtools`をインポートし、`Vue.use()`でNativeScript-Vueに知らせてください。 + +```JavaScript +import Vue from 'nativescript-vue' +import VueDevtools from 'nativescript-vue-devtools' + +Vue.use(VueDevtools) +``` + +もしエミュレータの代わりに実機を使用している場合、`host`オプション実機？のIPアドレスを指すように設定してください。そうしなければ、実機でホスト機器に接続できません。 + +```JavaScript +Vue.use(VueDevtools, { host: '192.168.1.42' }) +``` + +## ステップ4: Vue DevToolsの起動 + +Vue DevToolsを立ち上げるために以下のコマンドを実行してください: + +```shell +$ # if installed globally +$ vue-devtools +$ # or +$ npx vue-devtools +``` + +## ステップ5: アプリをビルドし直して起動する + +以下のコマンドを実行してください: + +```shell +$ rm -rf platforms +$ tns run android --bundle +$ # or +$ tns run ios --bundle +``` + +機器とアプリを正しく設定しているのなら、Vue DevToolsのコンポーネントツリーの中にいくつかコンポーネントが表示されているはすです。 \ No newline at end of file diff --git a/content/docs/ja/getting-started/6-nativescript-plugins.md b/content/docs/ja/getting-started/6-nativescript-plugins.md new file mode 100644 index 00000000..4749851e --- /dev/null +++ b/content/docs/ja/getting-started/6-nativescript-plugins.md @@ -0,0 +1,45 @@ +--- +title: NativeScriptのプラグインを使う +contributors: [Spice-Z] +--- + +プラグインは[どんなNativeScriptのアプリでも](https://docs.nativescript.org/plugins/plugins)機能しますが、_UI_のプラグインがどのようにVueで機能するのか気になることでしょう。 + +UIのプラグインは、AngularのアプリでNativeScriptのUIプラグインを用いていたのとほとんど同じように機能します。 + +## 例えば: nativescript-gradient + +どのように[nativescript-gradient](https://github.com/EddyVerbruggen/nativescript-gradient)を使うことができるか見てみましょう。こちらの[listview sample](https://github.com/rigor789/nativescript-vue/tree/master/samples/app/app-with-list-view.js)でも使い方を確認できます。 + +### NativeScript CLIを使ってプラグインをインストールする + +[NativeScriptの開発環境のセットアップ](/ja/docs/getting-started/installation)を終えてから、次のコマンドを実行して下さい: + +```shell +$ npm install --save nativescript-gradient +``` + +> **注意:** もしプラグインがすぐに動かない場合、プラットフォームのフォルダを消去してプロジェクトをクリーンする必要があります: + +```shell +$ rm -rf platforms +``` + +### アプリにプラグインを登録する + +アプリのエントリーファイル(`app.js`や`main.js`など)を開き、次の行をトップに追加して下さい: + +```JavaScript +Vue.registerElement('Gradient', () => require('nativescript-gradient').Gradient) +``` + +ここでは`Vue`インスタンスにプラグインを読み込んで登録しています。`registerElement`関数は第一引数に``の名前を、第二引数にプラグインを返す関数を要求します。コードの中では、呼び出そうとするエレメントの名前を正確に渡してください。プラグインの名前はnpmのパッケージ名のように正確に渡してください。 + +### アプリでプラグインを使う + +```HTML + + + +``` From 560545898771f88e15fc41588b2330817d782ce6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E5=80=89=E5=84=AA=E6=82=9F?= Date: Mon, 18 Feb 2019 01:41:04 +0900 Subject: [PATCH 06/26] add japanse translate 7-vue-plugins.md --- .../docs/ja/getting-started/7-vue-plugins.md | 95 +++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 content/docs/ja/getting-started/7-vue-plugins.md diff --git a/content/docs/ja/getting-started/7-vue-plugins.md b/content/docs/ja/getting-started/7-vue-plugins.md new file mode 100644 index 00000000..2a4f4b7a --- /dev/null +++ b/content/docs/ja/getting-started/7-vue-plugins.md @@ -0,0 +1,95 @@ +--- +title: Vueのプラグインを使う +contributors: [Spice-Z] +--- + +このページではNativeScript-Vueで動く、現在サポートしているVueのプラグインについての概要説明します。 + +* [Vue Router](#vue-router) +* [Vuex](#vuex) + +## Vue Router + +> 現在、Vue Routerとの統合は**サポートされていません**。問題が解決するまで、[手動でのルーティング](/en/docs/routing/manual-routing)を行ってください。 + +## Vuex + +Vuex は Vue.js アプリケーションのための状態管理パターン + ライブラリです。It serves as a store for all the components in an app and implements rules to ensure that state is mutated in a predictable fashion. +これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 + +### プラグインをインストールする + +普段Vue.jsのアプリでするように、Vuexをnpmでインストールしましょう。例えばこんな感じです: + +```shell +$ npm install --save vuex +``` + +最新のVuexのバージョンが`package.json`に追加されます。 + +### プラグインをインポートする + +アプリのエントリーファイル(`app.js`や`main.js`など)を開いて、トップに以下のコードを追加してください: + +```js +import Vuex from 'vuex' +Vue.use(Vuex) +``` + +これで、通常のウェブアプリで使っていたように、モバイルアプリの状態管理にVuexが使えるようになりました。 + +### 使い方: ストアの作成 + +状態を保存してVuexのAPIを使うために、新たな定数を作成刷る必要があります。アプリのエントリーファイル中のVueインスタンスの生成後か、他のフォルダ(例えば、`/store`)で行うことができます。 +以下の例では、シンプルなストアの定数にカウンターの状態とそのミューテーションが含まれています: + +```js +const store = new Vuex.Store({ + state: { + count: 0 + }, + mutations: { + increment: state => state.count++, + decrement: state => state.count-- + } +}) +``` + +### 使い方: ストアを使う + +生成したストアを呼ぶことで、状態を管理できます。以下の例では、アプリは'+'と '-'ボタンが押されたことを追跡します。状態自体を変化させず、値を変化させるためにはミューテーションを呼ぶことに注意してください。 + +```js +new Vue({ + computed: { + count(){ + return store.state.count + } + }, + + template: ` + + + +

本当のネイティブアプリを、 Vue.js と NativeScriptを使って作ろう。

使い始めるのは簡単。

親しみやすいシンタックス。

迅速なワークフロー。

スポンサー

本当のネイティブアプリを、 Vue.js と NativeScriptを使って作ろう。

本物のネイティブアプリを、Vue.jsとNativeScriptを使って作ろう。

使い始めるのは簡単。

親しみやすいシンタックス。