vueX基礎知識筆記
接著昨天的知識點
mutations提交時，有時候達不到想要的響應式，我們必須要將資料提前放到state中，否則不會達到響應式的效果。比如
state.info['address'] = value //此方式，雖然通過devtools資料追蹤到已經新增資料，但是沒有渲染，沒有達到響應式，為解決這個問題我們可以這樣
vue.set($store.state.info,'address','beijing') // 通過這樣我們就加了一個address:beijing的屬性，而且達到響應式
delete state.name //此方式，雖然devtools資料已經刪除，但是渲染的地方不會消失，沒有達到響應式。這時
vue.delete($store.state,'name') //這樣我們就將state中的name刪除了
下面我們介紹actions
從這樣圖中我們可以看出 元件--->用dispatch給actions--->actions通過commit---->mutations---->修改資料----->rander渲染元件，這是一個迴圈過程
然而mutations只接受同步操作，devtools工具才能追蹤到我們的資料，所以就有了actions，這是專門處理非同步操作的，通過元件使用dispatch給actions然後通
過actions中使用commit達到間接操作mutations的效果去修改資料。注意我們有一些非同步操作的時候，一定要按照流程走，否則devtools工具無法追蹤資料。
這裡有個小的知識點，就是當我們在actions進行非同步操作的時候，我們組建想要知道是否已經執行成功或者失敗，這時候我們可以返回一些資訊告知使用者
actions片段
aUpDate(context, pyload) {
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit("update", pyload)
console.log(pyload.message);
resolve('成功接收訊息')
}, 2000)
}
元件片段
<button @click="change">change</button>
change(){
this.$store.dispatch("aUpDate",{
message:"我是攜帶的資訊",
sucess:()=>{}
}).then((data)=>{
console.log(data);
})
}
看看程式碼能不能看懂？
用這個函式去返回一個promise物件，得到成功時的轉態resolve(‘成功接受訊息’)，然後在元件後使用.then方法，並且答應resolve中攜帶的資訊。
這就是actions基本用法了
這時候就剩下我們的modules了，
哪什麼是modules呢？modules簡單的來說，它就是避免vuex中state中的資料隨著專案的逐漸變大，會顯得十分臃腫，所以就開闢了modules來分模組管理資料，modules中的每一個屬性就對應一個模組，每一個模組中包括state,mutations,getters,actions,modules說這麼多，那是怎麼分模組的呢?上程式碼可能會理解的更清楚
moduleA={
state:{
name:"kobe"
},
mutations:{},
getters{},
actions:{},
modules:{}
}
new Vuex.store({
state:{},
mutations:{},
getters{},
actions:{},
moudles｛
key1: moduleA
})
這樣是否是不是get到了一點呢？如果還沒有咱們再往下看吧
獲取資料
$store.state.key1.name //就訪問到了moudelA中的name了
getters:
1. 事件型別（state）{return state.name}
2. 事件型別（state,getters）{return getters.事件型別}
3. 事件型別 (state,getters,rootState){return rootState.name}
1. 返回moduleA中的name
2. 返回moduleA中getters中的事件型別
3. 返回根的state.name
（假設資料都存在，以上的例子）
mutations：
this.$store.commit("事件型別"，pyload) //給mutations
actions:
this.$store.dispatch("事件型別"，pyload) //給actions
actions:
事件型別（context,pyload）{
settimeout(()=>{
context.commit("事件型別"，pyload) //給mutations
})
這樣就相當間接操作mutations去改變moudles中的state了
最後一個我們不要再解釋了吧，要是還要解釋，估計我得解釋一輩子。大家有什麼建議，隨時可以跟我留言哦，我們在學習的路上，可以互相學習，互相進
步。
}