Vue ファミリー バケットとは何ですか?

推奨チュートリアル: VUE.JS チュートリアル

Vue には有名なファミリー バケット シリーズがあります。 vue-router、vuex、 vue-resource を含みます。ビルド ツール vue-cli および sass スタイルと組み合わせることで、完全な vue プロジェクトのコア コンポーネントとなります。

要約すると:

1. プロジェクト構築ツール

## 2. ルーティング

3. ステータス管理

4. http リクエストツール。

以下は別の紹介です

序文: Vue の 2 つの中心的なアイデア: コンポーネント化とデータ駆動型 。コンポーネント化: 全体を再利用可能な個別に分割します。データ駆動: データの変更を通じて BOM 表示に直接影響し、DOM 操作を回避します。

1. Vue-cli は、このシングルページ アプリケーションを迅速に構築するための足場です。 vue-router

インストール: npm installvue-router

これをモジュラー プロジェクトで使用する場合は、Vue.use() を通じてルーティング関数を明示的にインストールする必要があります。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ 
cd my-project
$ npm install
$ npm run dev

さらに、使用中に、vue のtransition 属性を使用してページを切り替える効果をレンダリングできることに注意してください。

3. vuex

vuex によって vue.js アプリケーション専用に開発された状態管理は、グローバル データ管理として理解できます。 Vuex は主に、ステート アクション、ミューテーション、ゲッター、マドルの 5 つの部分で構成されます。

使用プロセスは次のとおりです。 上記の 4 つの部分は、mudle、1、state

データを除き、コンポーネント内で直接呼び出すことができます。 vue オブジェクトのデータとステータスを保存するには、を使用します。保存されたデータは応答性があり、データが変更されると、そのデータに依存するコンポーネントもそれに応じて変更されます。

状態を取得する 2 つの方法の例:

1.store.getters['getRateUserInfo']

2. ...mapGetters({

UserInfo: 'login/UserInfo', // ユーザー情報

menuList: 'getMenuList', // 運賃承認承認

RateUserInfo: 'getRateUserInfo' // ユーザー情報を評価

})

注: グローバル状態とゲッターは、mapState を通じて現在のコンポーネントの計算されたプロパティにマップできます。

2、アクション

アクションは、store.dispatch メソッドを通じてトリガーされます。アクションは非同期呼び出しをサポートし (API を呼び出すことができます)、ミューテーションは操作の同期のみをサポートします。送信されたアクションは、状態を直接変更するのではなく、突然変異です。

例:

import Vue from'vue'
import VueRouter from'vue-router'
Vue.use(VueRouter)

Action 関数はストア インスタンスと同じメソッドとプロパティを持つコンテキスト オブジェクトを受け入れるため、context.commit を呼び出して変更を送信したり、コンテキストを渡したりできます。状態とコンテキスト。状態とゲッターを取得するためのゲッター。

実際には、コードを簡素化するために ES2015 パラメータの構造化をよく使用します (特に何度も commit を呼び出す必要がある場合):

3、mutation

各ミューテーションには、文字列イベント タイプ (タイプ) とコールバック関数 (ハンドラー) があります。このコールバック関数は、実際に状態を変更する場所であり、状態を最初のパラメータとして受け取ります。

4. Getters

Vuex を使用すると、ストア内で「ゲッター」を定義できます (ストアの計算されたプロパティとみなすことができます)。計算されたプロパティと同様に、ゲッターの戻り値は依存関係に従ってキャッシュされ、依存関係の値が変更された場合にのみ再計算されます。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

mapGetters ヘルパー関数

MapGetters 補助関数関数は、ストア内のゲッターをローカルの計算されたプロパティにマップするだけです:

4. axios

Axios は http リクエスト パッケージです。Vue 公式 Web サイトhttp 呼び出しには axios を使用することをお勧めします。

インストール:

const getters = {
  getRateInitData: state => state.rateInitData,
  getchooseRateObj: state => state.chooseRateObj,
  getSearchRateParams: state => state.searchRateParams,
  getSearchRateResult: state => state.searchRateResult,
  getRateUserInfo: state => state.RateUserInfo,
  getMenuList: state => state.menuList,
  getRateQueryParams: state => state.rateQueryParams,
  getRateQueryResult: state => state.rateQueryResult,
  getCheckRateDetailParams: state => state.checkRateDetailParams,
  getReferenceCondition: state => state.referenceCondition,
  getWaitApprovalParams: state => state.waitApprovalParams
}

例:

1. GET リクエストを送信します

npm install axios --save

以上がVue ファミリー バケットとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。