ホームページ > ウェブフロントエンド > jsチュートリアル > vuex プロジェクトの構造ディレクトリと設定の使用方法の詳細な説明

vuex プロジェクトの構造ディレクトリと設定の使用方法の詳細な説明

php中世界最好的语言
リリース: 2018-05-02 10:16:00
オリジナル
2268 人が閲覧しました

今回は、vuex プロジェクトの構造ディレクトリと構成の使用方法について詳しく説明します。vuex プロジェクトの構造ディレクトリと構成を使用する際の 注意事項 について、実際のケースを見てみましょう。

まず、公式 Web サイトからの重大な「アドバイス」です:

vuex が遵守する必要があるルール:

1 アプリケーション レベルのステータスは 1 つのストアに集中する必要があります。

オブジェクト

2. ミューテーションの送信が状態を変更する唯一の方法であり、このプロセスは同期的です。

3. すべての非同期ロジックは

action にカプセル化する必要があります。

ファイル

ディレクトリ構造

ファイル間の関係:

storeフォルダー - 一連のvuexファイルを保存します

store.js - vuexの導入、状態データの設定、ゲッター、ミューテーション、およびアクションの導入

getter .js - ストア内の状態を取得します

mutation.js - ストア内の状態を変更するために使用される関数が保存される場所

action.js - 状態を巧みに変更するためのミューテーションを送信し、非同期で操作できます

シンプルで

store.js ファイルを記述するもう 1 つの一般的な方法: main.js ファイル内で

1

2

3

4

5

6

7

8

9

10

11

12

13

14

import Vue from 'vue'

import Vuex from 'vuex'

import actions from './actions'

import mutations from './mutations'

Vue.use(Vuex)

const state = {

 a: '初始值',

 b: 'balabala...'

}

export default new Vuex.Store({

  state,

  actions,

  mutations

})

ログイン後にコピー
(ルーターを挿入するのと同じように、ルート コンポーネントからストアを挿入します):

ルート インスタンスにストア オプションを登録することにより、 store インスタンスはルート コンポーネントの下のすべてのサブコンポーネントに挿入され、サブコンポーネントには this.$store を通じてアクセスできます。

1

2

3

4

5

6

7

import store from './store/index'

new Vue({

 el: '#app',

 router,

 store,

 ...

})

ログイン後にコピー
Getter.jsの簡単な設定(ストアの計算されたプロパティ、パラメータとして状態を受け取る)

1

2

3

4

5

export default {

  doneTodos: state = >{

   return state.todos.filter(todo = >todo.done)

  }

}

ログイン後にコピー
Get(コンポーネントの計算されたプロパティ内):

1

2

3

4

5

computed: {

 doneTodosCount () { 

  return this.$store.getters.doneTodosCount 

 }

}

ログイン後にコピー
渡せるgetter属性の簡単な設定

1

2

3

4

5

export default{

 getTodoById: (state) => (id) => { 

  return state.todos.find(todo => todo.id === id) 

 }

}

ログイン後にコピー
Get(計算されたコンポーネントのプロパティ (内部):

1

2

3

4

5

computed: {

 getTodoById() { 

  return this.$store.getters.getTodoById(‘参数')

 }

}

ログイン後にコピー
mutation.js の簡単な構成:

1

2

3

4

5

6

export default {

  increment(state) {

   //变更状态

   state.count++

  }

}

ログイン後にコピー
トリガー (コンポーネント内)

1

2

3

4

5

6

7

8

9

10

11

this.$store.commit(state,payload)

actions.js简单配置:

export default{

 action (context) {

 //异步操作

  setTimeout(()=>{

   //变更状态

   context.commit('mutationFunName',value)

  })

 }

}

ログイン後にコピー
トリガー (コンポーネントの)

1

2

this.$store.dispatch('mutationFunctionName')

2018-04-07 18:13:34

ログイン後にコピー
この記事の事例を読んだ後は、方法をマスターできたと思います。 、さらにエキサイティングなことが起こるでしょう php 中国語 Web サイトの他の関連記事にもご注目ください。

推奨読書:

初回読み込み速度の遅さを解決するための vue-router の遅延読み込み 詳細な手順

vue2.0 リソース ファイル アセットと静的使用手順

での Router の使用方法の詳細な説明Angular 5.x

以上がvuex プロジェクトの構造ディレクトリと設定の使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート