シンプル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、そのようなファッションの名前を使用するなど、