vuex例

公式サイト:https://vuex.vuejs.org/zh/guide/state.html

 


Vuexは特別にVue.jsアプリケーションの状態管理のために開発されました


1.vuex(異なる構成要素間のデータ共有を解決するために)コンポーネント間で同じ状態を共有する問題を解決します

内部の永続的なデータの2アセンブリ。

 

小項目がvuex省が推奨されていません

 

 

最初の方法:

 

1、srcディレクトリには、新しいフォルダを作成しvuex

 

2、vuex store.js内に新しいフォルダを作成します


3、インストールvuex

  cnpmインストールvuex --save

作成したばかりのVUE store.jsで導入された4は、vuexと使用vuexを導入しました

  「VUE」からインポートVueの
  「vuex」からインポートVuex

  Vue.use(Vuex)

 

5、定義データ

vuexの中/データ*を格納する/*1.state
  VAR状態= {

    COUNT :. 1
  }


。放電法は、メソッド、内部データ状態を変更するための主な方法である6、定義された変異

  た変異= {

    incCount(){

      ++ state.count;
    }
  }

 


晒します

  CONST店舗=新しいVuex.Store({
    状態、
    変異
  })

  エクスポートデフォルトストア。

 

 


vuexを使用しているの形成:


店舗の紹介1。

  「../vuex/store.js'からインポート店;


2、登録

  デフォルト{エクスポート
    データ(){
      リターン{
        MSG: '私は自宅のコンポーネントよ'、
        VALUE1:ヌル、

      }
    }、
    
    メソッド:{
    incCount(){

        この$( 'incCount')store.commit; / *トリガを。その状態データ* /
      }

    }
  }
状態データを取得する3

これます$ STORE.STATE。データ

 

4、トリガー変異は、内部のデータの状態変更

この$のstore.commit(「incCountを」) 。

 

 

 

第二の方法:

 

VuexはVue.js状態管理のために特別に設計されています


vuexコンポーネント間の同じ状態を共有する問題を解決します。我々は状態を共有するために、複数のアプリケーションコンポーネントが発生したときに、あなたがする必要があります。

コンポーネントの複数の同一の状態に依存します。ネストされたコンポーネントに渡すパラメータの方法は非常に面倒な、兄弟アセンブリとの間の状態を転送することができないであろう。それは、VUEのエンコーディング、複数のコンポーネント間の練習のコミュニケーションを学ぶためにあなたを取ります。
動作は同じ状態の異なる成分から変更する必要があります。私たちは、多くの場合、イベントを通じて直接参照コンポーネントまたは複数のコピーと同期ステータスを変更するために彼の息子を取ります。

これらのモデルのよりは頻繁に維持することができないコードになり、非常に脆弱です。公式サイトからの言葉:Vuexは、状態管理のアプリケーション開発のために設計されVue.jsです。

これは、ストレージ管理アプリケーション集中すべてのコンポーネントの状態を使用しています。ここで重要なのは、ストレージの集中管理ということです。これは、通信及びストアの両方のコンポーネントで、コンポーネント間の通信を更新する必要があるが、今vuexを有する状態を共有するために必要とされたであろうことを意味します。質問は自然に解決しました。

公式ウェブサイトが大規模なアプリケーションのために再びVuex値を述べる理由です。あなたは、大規模な単一ページのアプリケーションを開発する予定がない場合は、Vuexの冗長化を使用して面倒なことができます。それは確かにそうである - アプリケーションが十分に単純であれば、あなたはVuexを使用しないでください。

 

 

 

Vuexは特別にVue.jsアプリケーションの状態管理のために開発されました


1.vuex(異なる構成要素間のデータ共有を解決するために)コンポーネント間で同じ状態を共有する問題を解決します

内部の永続的なデータの2アセンブリ。

 

小項目がvuex省が推奨されていません

 

 

 

 

vuex使用:


1、srcディレクトリには、新しいフォルダを作成しvuex

 

2、vuex store.js内に新しいフォルダを作成します


3、インストールvuex

cnpmインストールvuex --save

作成したばかりのVUE store.jsで導入された4は、vuexと使用vuexを導入しました

「VUE」からインポートVueの
「vuex」からインポートVuex

Vue.use(Vuex)

 

5、定義データ

vuexの中/データ*を格納する/*1.state
VAR状態= {

COUNT :. 1
}


。放電法は、メソッド、内部データ状態を変更するための主な方法である6、定義された変異

た変異= {

incCount(){

++ state.count;
}
}


図7に示すように、同様の利点が状態を変化させる、特性を計算した場合、新しい値を取得するゲッターメソッド内部トリガーカウントデータ(実質的により少ないです)


VARゲッター= {

computedCount:(状態)=> {
戻りstate.count * 2
}
}

 

8、ほとんどないとアクション

アクション類似した突然変異、点を除いて:

アクションは、直接、状態を変更するのではなく、突然変異を提出しています。
アクションは、任意の非同期操作を含めることができます。


アクション= {VARの
incMutationsCount(コンテキスト){/ *ので、あなたはコールcontext.commit *突然変異/提出することができる


context.commit( 'incCountを'); / *データ*内部の状態を変更するincCountメソッド内の変異を実行/


}
}

 


晒します

CONST店舗=新しいVuex.Store({
状態、
変異、
ゲッター、
アクション
})



輸出デフォルトのストア。

 

 


vuexを使用しているの形成:


店舗の紹介1。

「../vuex/store.js'からインポート店;


2、登録

デフォルト{エクスポート
データ(){
リターン{
MSG: '私は自宅のコンポーネントよ'、
VALUE1:ヌル、

}
}、
店、
メソッド:{
incCount(){

この$( 'incCount')store.commit; / *トリガを。その状態データ* /
}

}
}
状態データを取得する3

これます$ STORE.STATE。データ

 

4、トリガー変異は、内部のデータの状態変更

この$のstore.commit(「incCountを」) 。


アクションメソッドをトリガー5、

この$のstore.dispatch( 'incCount'。 );


図6に示すように、{{この。$ Store.getters.computedCount}}この方法は、ゲッターであるデータを取得する戻り

 

おすすめ

転載: www.cnblogs.com/jasonLiu2018/p/11096310.html