vuex使用方法でVUE

シンプルvuex使用にする方法:

インストールします。

    NPM I vuex --save-devの

新しいフォルダストアを作成し、
Index.jsは、ファイルの格納フォルダ内のファイルを作成します:
        「表示」からインポートビュー
        「vuex」からインポートvuex
        Vue.use(vuex)
        VaRの状態= {//状態がデータvuexに格納することの必要性を属性
            名前:「コンピュータ」
    年齢:2、
     データ: 'blabla'       
        }
        
        VARアクションここで定義されたよう= {//非同期メソッドは、メソッドと呼ばれるchangeNameあります
            changeName(コンテキスト名){
                context.commit( 'changeName'、名前)
            }
        }
        VAR突然変異= {//同期方法、方法は、本明細書に記載されるようなchangeNameがあり、好ましくは上記の名前と同じです
            changeName(状態、NEWNAME){
                state.name = NEWNAME // NEWNAME状態が名前に変更されました
            }
        }
 
        {(大=新しいvuex.Storeました
            状態、
            行動、
            変異
        })
    輸出デフォルトのストア
================================================== ===============
main.jsファイルには、店舗の紹介:
「./store」// vuex状態マネージャからのインポートストア
        新しいビュー({
            エル: "#アプリ"、
            ルータ、
            格納
        })
 
    //アセンブリ内のデータの状態を呼び出します。たとえば、道に名前を付けます
        {{$のstore.state.name}}
 //コンポーネントでのトリガーの変更は、このメソッドを呼び出す前にある道のchangeNameメソッドvuexの方法:
        名前の変更</ button>の<ボタン@ = "変更" をクリック>
 
        {
            方法:{
                変化する(){
          //このステップは、名前vuexで「新しいコンピュータ」に変更し、これにchangeName(状態、NEWNAME){state.name = NEWNAME}相当であるvuex
                    この。$のstore.dispatch( "changeName"、 '新しいコンピュータ')     
                }
            }
        }
 
 
 要約:
    状態:vuexに格納されたデータ
    アクション:非同期メソッドがで定義されています
    変異:同期方法がで定義されました
 この$のstore.dispatch(「changeName」、「新しいコンピュータ」):メソッド呼び出しのvuex、パラメータ渡しモード
    $ Store.state.name:データ使用量のvuex、そのようなファッションの名前を使用するなど、

 

おすすめ

転載: www.cnblogs.com/shidawang/p/11966316.html