摘要:什么情況下適合使合使用中有幾個(gè)步驟開(kāi)始之前先簡(jiǎn)單了解一下定義是一個(gè)狀態(tài)管理機(jī)制采用集中式存儲(chǔ)應(yīng)用所有組件的狀態(tài)嗯,就是一句話能說(shuō)明白的,沒(méi)明白的,我們用代碼再理解一下什么叫集中式式存儲(chǔ)比如下面這段代碼,同時(shí)需要用到,那么我們首先能想到就是在
20190121
什么情況下適合使合vuex?Vuex使用中有幾個(gè)步驟?
開(kāi)始之前先簡(jiǎn)單了解一下vuex
定義: vuex是一個(gè)狀態(tài)管理機(jī)制,采用集中式存儲(chǔ)應(yīng)用所有組件的狀態(tài)
嗯,就是一句話能說(shuō)明白的,沒(méi)明白的,我們用代碼再理解一下什么叫集中式式存儲(chǔ)
比如下面這段代碼,同時(shí)需要用到username,那么我們首先能想到就是在兩個(gè)組件內(nèi)都進(jìn)行一次獲取username的操作, 這種操作是有明顯弊端的, 如帶寬資源浪費(fèi),代碼不好維護(hù)等等
// a.vue{{username}}// b.vue{{username}}
那么集中式是什么概念呢,就是把整個(gè)應(yīng)用的狀態(tài)獨(dú)立出來(lái)當(dāng)成一個(gè)樹(shù)形結(jié)構(gòu)管理,所有葉子數(shù)據(jù)的更改都使用唯一的通道進(jìn)行操作,下面用代碼再來(lái)理解一下
// a.vue什么情況下適合使合vuex{{username}}// b.vue{{username}}
老生常談的話題,每個(gè)人的使用動(dòng)機(jī)不同可能結(jié)果就不同,站在系統(tǒng)架構(gòu)的角度上來(lái),vuex雖然能很好幫助我們管理狀態(tài), 但隨之也帶來(lái)更多的概念讓我們花時(shí)間來(lái)消化,一般情況下我們會(huì)根據(jù)項(xiàng)目的實(shí)際大小來(lái)決定是否需要引入vuex
Vuex使用中有幾個(gè)步驟
先上一張圖理解一下vuex工作的流程
從圖中我們可以看到vuex包含了3個(gè)關(guān)鍵詞
state
actions
mutations
只要知道就行,后面再展開(kāi)講
先看下最簡(jiǎn)單使用vuex的方式
// store.js // store中管理store以及mutations, 然后在組件中通過(guò)commit來(lái)觸發(fā)store中mutations的方法 const store = new Vuex.Store({ state: { name: "JS" }, mutations: { updateName (state) { state.name = "JS每日一題" } } }) // a.vue store.commit("updateName") // JS每日一題state
字面意思就是狀態(tài),上面也說(shuō)了vuex是集中式管理, 那么在這里就理解成為集中管理的狀態(tài)(全局可使用狀態(tài))
組件中獲取狀態(tài)可以通過(guò)以下方式
const Demo = { template: `mutations{{ name }}`, computed: { name () { return store.state.name } } } // 也可以通過(guò)mapState 輔助函數(shù)來(lái)獲取 computed: mapState({ name: state => state.name }) // 引入多個(gè)state可以通過(guò)對(duì)象展開(kāi)運(yùn)算符來(lái)獲取 computed: { ...mapState({ name // ... }) }
更改vuex中的store的唯一途徑就是mutation,且必須是同步函數(shù)
代碼理解
// 首先mutations 是一個(gè)對(duì)象 // 下面的updateName 展開(kāi)寫(xiě)就是 updateName : function(){}, 在vuex叫做Type Handler // 根據(jù)上一條的解釋,所以會(huì)看到很多mutations的寫(xiě)法類 [GET_USER_INFO] : (state) => {} // 你不能直接調(diào)用mutations.updateName, 因?yàn)閙utations 只負(fù)責(zé)注冊(cè)事件,需要通過(guò)store.commit(type) 來(lái)喚醒對(duì)應(yīng)type的handler // Mutation 需遵守 Vue 的響應(yīng)規(guī)則,也就是說(shuō)沒(méi)有被Object.defineProperty 劫持到的state不會(huì)響應(yīng)式, 比如你有一個(gè)state為obj = {}, 然后你通過(guò)mutation來(lái)為obj新增一個(gè)屬性, 這時(shí)候你需要替換原有的obj組件才會(huì)正常響應(yīng), 常用的方式可以通過(guò)Object.assign() mutations: { updateName (state) { state.name = "JS每日一題" } } // 組件中可以通過(guò)mapMutaions 輔助函數(shù)來(lái)映射關(guān)系 // 下面等同于 this.updateName() this.$store.commit("updateName") methods: { ...mapMutaions([ "updateName", ... ]) }Action
Action 類似于 mutation,提交的是 mutation,而不是直接變更狀態(tài)。簡(jiǎn)單來(lái)說(shuō)就是mutation只負(fù)責(zé)同步操作,action負(fù)責(zé)異步操作
mutations: { updateName (state) { state.name = "JS每日一題" } }, actions: { // context是一個(gè)具有store 實(shí)例相同方法和屬性的對(duì)象 getUserInfo (context) { setTimeout(() => { commit("updateName") }, 1000) } } // 組件中可以通過(guò)mapActions 輔助函數(shù)來(lái)映射關(guān)系 // 下面等同于 this.getUserInfo() this.$store.commit("getUserInfo") methods: { ...組件中可以通過(guò)mapActions([ "getUserInfo", ... ]) }總結(jié)
vuex是一種狀態(tài)管理機(jī)制,將全局組件的共享狀態(tài)抽取出來(lái)為一個(gè)store,以一個(gè)單例模式存在,應(yīng)用任何一個(gè)組件中都可以使用,vuex更改state的唯一途徑是通過(guò)mutation,mutation需要commit觸發(fā), action實(shí)際觸發(fā)是mutation,其中mutation處理同步任務(wù),action處理異步任務(wù)
關(guān)于JS每日一題JS每日一題可以看成是一個(gè)語(yǔ)音答題社區(qū)
每天利用碎片時(shí)間采用60秒內(nèi)的語(yǔ)音形式來(lái)完成當(dāng)天的考題
群主在次日0點(diǎn)推送當(dāng)天的參考答案
注 絕不僅限于完成當(dāng)天任務(wù),更多是查漏補(bǔ)缺,學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路
點(diǎn)擊加入答題
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/101934.html
摘要:給的實(shí)例注入一個(gè)的屬性,這也就是為什么我們?cè)诘慕M件中可以通過(guò)訪問(wèn)到的各種數(shù)據(jù)和狀態(tài)源碼位置,是怎么實(shí)現(xiàn)的源碼位置是對(duì)的的初始化,它接受個(gè)參數(shù),為當(dāng)前實(shí)例,為的,為執(zhí)行的回調(diào)函數(shù),為當(dāng)前模塊的路徑。 20190221 請(qǐng)簡(jiǎn)述一下vuex實(shí)現(xiàn)原理 對(duì)vuex基礎(chǔ)概念有不懂的可以點(diǎn)這里 vuex實(shí)現(xiàn)原理我們簡(jiǎn)單過(guò)一遍源碼 地址 https://github.com/vuejs/vuex 首...
摘要:前端面試題總結(jié)持續(xù)更新中是哪個(gè)組件的屬性模塊的組件。都提供合理的鉤子函數(shù),可以讓開(kāi)發(fā)者定制化地去處理需求。 前端面試題總結(jié)——VUE(持續(xù)更新中) 1.active-class是哪個(gè)組件的屬性? vue-router模塊的router-link組件。 2.嵌套路由怎么定義? 在 VueRouter 的參數(shù)中使用 children 配置,這樣就可以很好的實(shí)現(xiàn)路由嵌套。 //引入兩個(gè)組件 ...
摘要:要招一個(gè)會(huì)的開(kāi)發(fā)者作為面試官的你,你還會(huì)每次都只是問(wèn)這些老土的問(wèn)題嗎你對(duì)的理解是什么你知道什么是雙向綁定嗎你了解它的原理嗎說(shuō)說(shuō)的生命周期有哪些組件通訊有哪些你用過(guò)嗎作為面試者的你,在網(wǎng)上搜索下面試題及答案,看完后你是不是覺(jué)得自己掌握了武林秘 showImg(https://segmentfault.com/img/bVburrG?w=533&h=300); 要招一個(gè)會(huì)vue的開(kāi)發(fā)者: ...
摘要:期如何實(shí)現(xiàn)一個(gè)我們?cè)谏蠋坠?jié)有講過(guò)今天我們來(lái)深入了解它們最暴力的方式莫過(guò)于動(dòng)手實(shí)現(xiàn)它們好了,回到正題先來(lái)回顧一下定義用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。可以使你在或加載模塊時(shí)預(yù)處理文件簡(jiǎn)單使用是導(dǎo)出為一個(gè)函數(shù)的模塊。 20190329期 如何實(shí)現(xiàn)一個(gè)Loader? 我們?cè)谏蠋坠?jié)有講過(guò)loader,今天我們來(lái)深入了解它們,最暴力的方式莫過(guò)于動(dòng)手實(shí)現(xiàn)它們 好了,回到正題, 先來(lái)回顧一下loader ...
摘要:期中類組件和函數(shù)式組件中有什么不同在中創(chuàng)建組件的形式有三種純函數(shù)式定義的無(wú)狀態(tài)組件定義的組件定義的組件今天我們要聊的是純函數(shù)式定義的無(wú)狀態(tài)組件及類組件的到底有什么不同分別在什么場(chǎng)景下適合使用首先我們來(lái)看一下用上述方法如何來(lái)創(chuàng)建一個(gè)組件定義的 20190306期 react中類組件和函數(shù)式組件中有什么不同? 在react中創(chuàng)建組件的形式有三種 純函數(shù)式定義的無(wú)狀態(tài)組件 React.cr...
閱讀 2049·2023-04-25 15:11
閱讀 3496·2021-09-23 11:57
閱讀 1384·2021-07-26 23:38
閱讀 1326·2019-08-30 15:54
閱讀 645·2019-08-30 15:53
閱讀 3254·2019-08-26 13:36
閱讀 997·2019-08-26 12:01
閱讀 2871·2019-08-23 16:21