国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS每日一題:什么情況下適合使合vuex?Vuex使用中有幾個(gè)步驟?

wow_worktile / 954人閱讀

摘要:什么情況下適合使合使用中有幾個(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


// b.vue

那么集中式是什么概念呢,就是把整個(gè)應(yīng)用的狀態(tài)獨(dú)立出來(lái)當(dāng)成一個(gè)樹(shù)形結(jié)構(gòu)管理,所有葉子數(shù)據(jù)的更改都使用唯一的通道進(jìn)行操作,下面用代碼再來(lái)理解一下

// a.vue


// b.vue


什么情況下適合使合vuex

老生常談的話題,每個(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: `
{{ 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 // ... }) }
mutations

更改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

相關(guān)文章

  • JS每日一題: 請(qǐng)簡(jiǎn)述一vuex實(shí)現(xiàn)原理

    摘要:給的實(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 首...

    JohnLui 評(píng)論0 收藏0
  • 前端面試題總結(jié)——VUE(持續(xù)更新中)

    摘要:前端面試題總結(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è)組件 ...

    SimonMa 評(píng)論0 收藏0
  • vue 248+個(gè)知識(shí)點(diǎn)(面試題)為你保駕護(hù)航

    摘要:要招一個(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ā)者: ...

    snowell 評(píng)論0 收藏0
  • JS每日一題:Webpack如何實(shí)現(xiàn)一個(gè)Loader?

    摘要:期如何實(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 ...

    HollisChuang 評(píng)論0 收藏0
  • JS每日一題:react中類組件和函數(shù)式組件中有什么不同?

    摘要:期中類組件和函數(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...

    Java_oldboy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<