作者: 混元霹靂手-ziksang
vuex官網的專業術語，讓有些人還是感覺，摸不著頭腦，做一些實用場景給大家看
- state 用來資料共享資料儲存
- mutation 用來註冊改變資料狀態
- getters 用來對共享資料進行過濾操作
- action 解決非同步改變共享資料
這個四大特徵就是核心，如何用怎麼用
接下來還是按著我們約定的來
此時採用的演示方式還是用官方提供的vue-cli webpack版本
在src目錄下我們創一個vuex資料夾，分別建立index.js,mutations.js,state.js,getters.js,actions.js
好處：
這樣我們可對四種特性進行分檔案，這樣可以更加明確，清楚
我們分別把這四個特性放入index.js中進行store的實列化
再把實列化的store引入就是所謂的index.js資料夾引入到main.js中，也可以同時把store註冊到每一個元件中
state如何用？
在頁面中，title肯定是必備，那每個元件頁面的title都肯定不一樣，那我們如何去拿到title,title適合放在那裡，根據每個頁面切換，而改變title,這個牽扯的就是元件與元件中的通訊
我們可以在state.js中先宣告一資料值
export default{
title : "首頁"
}複製程式碼那我們如何在首頁中拿到這個title值
那我們在mian.js中再加入new Vue,繫結title作用域的例項程式碼
我們在computed裡進行資料監聽，
此時我們就可以從store裡拿到state.title
最後一步，我們在index.html中我們再進行{{title}}繫結
index.html
<title>{{title}}</title>複製程式碼此時我們執行一下，開啟dev-tools你會發現
title這個資料已經在全域性被共享了
matutions如何使用
應用場景：
如果我們要改變頂層的共享資料，我們應該要用matutions來進行改變，如果你做公眾號，後臺一般會在連線的上給你一些引數，比方說sid,ck,tm,或者一些其它東西，你想把他存在state中，如果去做，那我們就通過matutions來進行註冊事件，為了演示，我才這麼做
注意：
對於vuex，我只推薦state狀態儲存只在一個頁面中元件與元件這間的通訊，不適合誇頁在， 放一些狀態
state.js
export default{
START_PARMA : {},
title : "首頁"
}複製程式碼START_PARMA用來存放我以上連線引數的資料，我們先前一定要定意好
mutations.js
export default{
getParam (state,Object) {
state.START_PARMA = Object
}
}複製程式碼我們對改變state資料進行一個事件註冊，第一個引數是拿到state物件，第二個是傳入的引數
- getParam官方說是type，其實就是註冊的事件名
- 可以是單個引數
- 如果是多個引數，我們則用物件放入，如果你寫兩個引數，會報錯
export default {
name : 'advertisement',
created () {
const keyCode = sessionStorage.keyCode = getQueryString('keyCode')
const keyWord = sessionStorage.keyWord = keyCode.split("_")[0]
const hunterCode = sessionStorage.hunterCode = keyCode.split("_")[1]
const sid = sessionStorage.sid= getQueryString('sid')
const ck = sessionStorage.ck = getQueryString('ck')
const tm = sessionStorage.tm = getQueryString('tm')
this.$store.commit('getParam',{
keyCode,
keyWord,
hunterCode,
sid,
ck,
tm
})
}
}複製程式碼我們自己建立一個檢視，然後在created裡進行擷取引數，因為store是註冊到每個元件中的，所以我們要用this.$store來訪問，那commit就是一個觸發器，第一個是type類形名，第二個參我們用物件的方式傳入，裡面用的是es6的語法
此時你會發現
此時的擷取的狀態放到了一個物件裡，我們就可以使用了
getters如何使用
如果說getter就是對state裡的資料進行一些過濾，改造等等
那比方說State裡有一些這樣的資料
state.js
people : [
{name : 'ziksang1',age:21},
{name : 'ziksang2',age:10},
{name : 'ziksang3',age:30},
{name : 'ziksang4',age:40},
{name : 'ziksang5',age:50},
{name : 'ziksang6',age:30},
{name : 'ziksang7',age:80}
]複製程式碼如果我們定義這些資料，然後我們要從，這些資料中篩選出年紀大於30的人，再進行返回，我們就可以用到getter,這裡的getter的意思就是對vuex頂層資料進行過濾，而不改動state裡原本的資料
getters.js
export default{
changePeople: (state) =>{
return state.people.filter(item=>{
if(item.age>30){
return true
}
})
}
}複製程式碼好我們如何應用呢，我們在元件中裡只要寫入
created () {
console.log(this.changePeople)
},
computed : {
changePeople () {
return this.$store.getters.changePeople
}
},複製程式碼那我們可以開啟命臺看一下，看回的資料，
接下來你如何想對資料進行操作那就看你自己的了
action 如何使用？
action.是用來解決非同步流程來改變state資料的，有想人說，那我直接在matution裡面進行寫進不就行了麻，那你可以試一下，因為matution是直接進行同步操作的
mutations.js
export default{
getParam (state,Object) {
setTimeout(()=>{
state.START_PARMA = Object
},1000)
}
}複製程式碼還是拿上面例子，如果你在mutations裡進行非同步操作，你會發現沒用，並不會起任何效果，那怎麼辦，只有通過action->mutations->states,這個流程進行操作
action.js
export default {
getParamSync (context,Object) {
setTimeout(()=>{
context.commit('getParam',Object)
},3000)
}
}複製程式碼寫一個getParamSync函靈敏，第一個引數就是上下文，context是一個store物件，你也可以用解構的方式寫出來,第二個引數還是我們要寫入的接收到的引數，來改變觸發mutations事件,再通過mutation來改變state,很好理解不難
然後我們就在元件裡這麼呼叫就可以了
this.$store.dispatch('getParamSync',{
keyCode,
keyWord,
hunterCode,
sid,
ck,
tm
})複製程式碼那組合action又是怎麼玩呢？我們有時候向後臺請求時，要通過第一個AJAX返回值來進行下一個action分發
我們可以用promise來進行非同步處理
actions.js
export default {
getParamSync (context,Object) {
return new Promise((reslove,reject)=>{
setTimeout(()=>{
context.commit('getParam',Object)
return reslove('成功')
},3000)
})
},
changetitleSync ({commit},title){
setTimeout(()=>{
commit('changetitle',title)
},3000)
}
}複製程式碼在getParamSync使用new promise之後，在resolve裡返回‘成功’，再分發一個changetitleSync改變title的action方法
mutations.js
export default{
getParam (state,Object) {
state.START_PARMA = Object
},
changetitle (state,title){
state.title = title
}
}複製程式碼再在註冊一個改變title的changetitle的type型別
組中間呼叫
created(){
this.$store.dispatch('getParamSync',{
keyCode,
keyWord,
hunterCode,
sid,
ck,
tm
}).then((res)=>{
this.$store.dispatch('changetitleSync',res)
})
}複製程式碼我們就可以在元件中進行一種鏈式呼叫，解決非同步回撥，來action套action,就成了一個組合action
關於其它輔助用法
- mapState 輔助函式
- mapGetters 輔助函式
- mapMutations 輔助函式
- mapActions 輔助函式
尤大神已經寫的很全面了，大家可以參考vuex的官網，進行閱讀一下。我在這裡就沒有必要再進行重新講解了
總結
在vuex中，我認為vuex用在那裡比較好？
只適合運用於一個檢視內元件與元件之間的組合傳遞，不適用於跨頁面，但是可以共用，為了不因使用者重新整理頁面，要進行初始化再次呼叫。
不適合運用在那裡
在自己寫一些Ui元件給大家或者開源用的話，不適用於寫在vuex中，應該暴露所接收的Props,通過$emit來進行觸發事件，一些關鍵性全域性狀態，不也適合存vuex中，你可以選擇localStorage,sessionStorage
想了解vue更多知識歡迎訂閱我的掘金專欄
渣渣前端開發工程師，喜歡鑽研，熱愛分享和講解教學請 微信 zzx1994428 QQ494755899
支援我繼續創作和感到有收穫的話，請向我打賞點吧
如果轉載請標註出自@混元霹靂手ziksang