1. 程式人生 > 其它 >小白的Vuex使用總結

小白的Vuex使用總結

技術標籤:vue

這裡寫自定義目錄標題


寫在開頭:本人小白,菜,剛剛開始學習,分享自己看vuex做的筆記。
State:存放資料的
Mutation:同步的修改,修改必須使用他。
Action:非同步修改,要先用mutation再用action

state:儲存資料的地方

在vuex裡面直接寫
在頁面上使用是$store.state.xxx

//定義資料
state: {
		name: "草莓SAMA"
, num: 0, },
//在頁面上使用上面所定義的資料
console.log(this.$store.state.name)
//這個$store.state是固定寫法,
//後面的name對應在上面定義時取的名字

Mutation:同步修改

定義寫法:方法名(state){ state.在state裡面的資料名字)}
在頁面上使用 $store.commit.方法名

在這裡插入圖片描述

Mutation帶引數

只是在括號裡面加上了引數,和不帶引數寫法是一樣的。
在這裡插入圖片描述
在這裡插入圖片描述

Action 非同步修改:必須先寫mutation,再寫action

定義寫法:方法名(context){context.commit(mutation裡面的方法名)}

在頁面使用:this.$store.dispatch(“方法名”)
在這裡插入圖片描述

在這裡插入圖片描述

Action帶引數

還是和不帶引數差不多的寫法。

在這裡插入圖片描述
在這裡插入圖片描述