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

vue.js ファミリー バケットは、vue-router、vuex、vue-resource、vue-cli、sass スタイルを含む完全な vue プロジェクトのコア コンポーネントです。 vue-cli は、単一ページのアプリケーションを迅速に構築するための足場です。

vue ファミリー バケット:

vue-router、vuex、vue-resource に加えて、ビルド ツール vue-cli、sass スタイルが含まれます。は、完全な Vue プロジェクトの中核となるコンポーネントです。

(学習ビデオ共有: javascript ビデオ チュートリアル)

要約:

1. プロジェクト構築ツール、2. ルーティング、3. ステータス管理; 4. http リクエスト ツール。

詳細な紹介:

Vue の 2 つの中心的なアイデア: コンポーネント化とデータ駆動型。

コンポーネント化: 全体を再利用可能な個別に分割します;

データ駆動: データ変更を通じて BOM 表示に直接影響を与え、DOM 操作を回避します。

1. Vue-cli は、この単一ページ アプリケーション

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

2 を迅速に構築するための足場です。vue-router

インストール:

npm installvue-router

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

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

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

3. vuex

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

使用手順は、上記4つの部分をコンポーネント内で直接呼び出すことができ、mudle、

1に加え、state

も同様のデータとなります。データとステータスを保存するために使用される vue オブジェクト。保存されたデータは応答性があり、データが変更されると、そのデータに依存するコンポーネントもそれに応じて変更されます。

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

(1)

store.getters['getRateUserInfo']

(2)

...mapGetters({
        UserInfo: 'login/UserInfo', // 用户信息
        menuList: 'getMenuList', // approve 运价审批
        RateUserInfo: 'getRateUserInfo' // Rate用户信息
   })

注:mapState を使用して、グローバル状態を結合できます。 state と Getter は、現在のコンポーネントの計算されたプロパティにマップされます。

2. アクション

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

例:

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

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

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

actions:{
  increment ({ commit }){
    commit('increment')
  }
}

3, mutation

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

4. Getters

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

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
}

mapGetters ヘルパー関数

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

4. axios

axios は http リクエスト パッケージです。Vue 公式 Web サイトでは、http 呼び出しには axios を使用することを推奨しています。

インストール:

npm install axios --save

例:

(1) GET リクエストの送信

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  })
  .catch(function(err){
    console.log(err);
  });
//以上请求也可以通过这种方式来发送
axios.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});

(2) POST リクエストの送信

axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

関連する推奨事項: vue.js チュートリアル

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