Vuex5個狀態詳解

本篇文章適合對vuecli和vuex稍微有一定了解的小夥伴，我將**拆分解釋和整合，希望可以幫助到你

安裝npm i -s vuex使用

1.腳手架src中新建store資料夾，再建乙個index.js入口檔案

import vue from
'vue'
//匯入vue
import vuex from
'vuex'
//匯入vuex
vue.
use(vuex)
const store =
newvuex.store(,
mutations:
,getters:
,actions:
,modules:
})

2.在main.js進行註冊使用方法類似於vue-router

import vue from
'vue'
import store from
'./store'
vue.config.productiontip =
false
newvue()
.$mount
()

用來儲存所有元件的共用資料,單一狀態樹概念，vuex中只用乙個state，方便管理

state中所有已經初始化好的狀態都是響應式的，當資料發生變化時，資料就會更新

state:,,
]},

在元件中呼叫這些共用資料

>
}h2>
>
}h2>

用來粗存操作state中儲存的資料的方法,這裡我們定義乙個操作state中count加和減的方法,

mutations:
,deincrease
(state)
,//mutations的傳參
increasefive
(state,count)
,increaselist
(state,count)
,//特殊提交風格，拿到的引數是乙個物件，適合多參提交
increaselist1
(state,payload)
,//響應式設計state中的obj
increaseobj
(state)
,deincreaseobj
(state)
},

在元件中使用方法


}<
/h2>
}<
/h2>
"increase"
>
+<
/button>
"deincrease"
>
-<
/button>
"increasefive(5)"
>+5
<
/button>
"increaselist"
>新增資料<
/button>
"increaselist1"
>新增資料特殊風格<
/button>
///}<
/h2>
"increaseobj"
>執行新增<
/button>
"deincreaseobj"
>執行刪除<
/button>
/methods:
,deincrease()
,//mutations的傳參
increasefive
(count)
,increaselist()
this
.$store.
commit
('increaselist'
,count)},
//特殊的提交風格，commit傳入乙個物件來觸發
increaselist1()
this
.$store.
commit()
},}

有時，我們會獲取stste中狀態的變化後的狀態，此時我們就用到了getters，類似於vue例項中的computed計算屬性

getters中的方法預設可以將state作為第乙個引數傳遞進來，將getters作為第二個引數傳遞進來

getters: ,//根據條件完成過濾陣列中age大於21的 agemore (state) ,//我們也可以將getters作為第二個引數傳進來，方便進行資料的多重處理 agemorelength (state,getters) ,//我們要在getters中進行傳參，過濾出陣列中age是使用者傳進來的 //getters中的方法預設可以將state作為第乙個引數傳遞進來，將getters作為第二個引數傳遞進來，所以我們用返回乙個函式並執行來解決getters中傳遞自定義引數的方法 ageage (state)

},

在元件中的使用

>
}h2>
>
}h2>
>
}h2>

在某些情況下我們需要vuex進行非同步操作，比如傳送網路請求，定時器等，我們就在actions裡面進行，如果放在mutations中，我們開發時就不能對資料的改變進行捕獲

actions類似與mutations，但是是用來替代mutations進行非同步操作

我們的非同步操作雖然是在actions中進行的，但僅限於獲取資料，操作state中的資料，還是要在mutations中進行的

actions:
,2000)}
},

在元件中的使用

methods：
}

當我們需要再將state中的資料進行模組化劃分的時候，使用，可以在modules中再定義乙個vuex的四種狀態

vuex會將資料整合，最後還是放到store裡，只是結構看起來更加清晰

modules: ,mutations: ,getters: ,actions:

,}

+-+5

新增資料

新增資料特殊風格執行新增

執行刪除

非同步操作

js**

import vue from
'vue'
import vuex from
'vuex'
vue.
use(vuex)
const store =
newvuex.store(,
,],obj:},
mutations:
,deincrease
(state)
,increasefive
(state,count)
,increaselist
(state,count)
,increaselist1
(state,payload)
,increaseobj
(state)
,deincreaseobj
(state)},
getters:
,agemore
(state)
,agemorelength
(state,getters)
,ageage
(state)}}
, actions:
,2000)}
},modules:})
export
default store

Vuex5個狀態詳解

vuex輔助函式和vuex5個屬性

vuex的5個核心用法

執行緒的5種狀態詳解

Vuex5個狀態詳解

vuex輔助函式和vuex5個屬性

vuex的5個核心用法

執行緒的5種狀態詳解

相關推薦