成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue經(jīng)驗(yàn)總結(jié)

FrancisSoung / 1640人閱讀

摘要：題記前段時(shí)間時(shí)隔個(gè)月重新拾起了，的太好用了。一初體驗(yàn)以前用慣了的然后突然切換到的真的有點(diǎn)不習(xí)慣?？梢园我猱惒讲僮?。至于剩下的目前好像還沒有怎么用到，就下次用了體驗(yàn)了過(guò)后再說(shuō)吧。

題記：前段時(shí)間時(shí)隔8個(gè)月重新拾起了vue，vue的太（yi）好（jing）用（wang）了（wan）。

一、Vuex初體驗(yàn)

以前用慣了react的dva然后突然切換到vue的vuex真的有點(diǎn)不習(xí)慣。

1、Store

這個(gè)是vuex中的大哥大，什么都?xì)w它管（state、mutations、getter、action、module），你可以把它理解為一個(gè)倉(cāng)庫(kù)（官方文檔也是這么說(shuō)的）

// 創(chuàng)建stroe
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
2、State

每個(gè)Stroe中都會(huì)有這么一個(gè)狀態(tài)樹、對(duì)于vue來(lái)說(shuō)他是全局的，對(duì)于store來(lái)說(shuō)他是唯一的，我們可以把它理解為倉(cāng)庫(kù)中的貨物，當(dāng)客戶（vue）中想要取出倉(cāng)庫(kù)（store）中的貨物（state），很簡(jiǎn)單this.$stroe.state.test

3、Mutation

mutation 必須是同步函數(shù)
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。這個(gè)我們可以把它比喻為一個(gè)訂單（Mutation），當(dāng)客戶（vue）需要改變倉(cāng)庫(kù)（store）中的貨物（state）時(shí)，我們就可以通過(guò)這個(gè)方法去改變，但是這個(gè)方法在本地是不能被直接調(diào)用的，你需要以相應(yīng)的 type 調(diào)用 store.commit 方法：

// 無(wú)參數(shù)提交
store.commit("increment")
// 有參數(shù)
store.commit("increment", {
  amount: 10
})
// OR
store.commit({
  type: "increment",
  amount: 10
})

其實(shí)這一點(diǎn)和dva有點(diǎn)相似

4、Action

這個(gè)和Mutation和相似，但是：

Action 提交的是 mutation，而不是直接變更狀態(tài)。

Action 可以包含任意異步操作。

而且actions是與Mutation的觸發(fā)方法也不同，它是用的store.dispatch(確認(rèn)過(guò)眼神)，而且它可以調(diào)用actions，講道理它是比mutation高一個(gè)等級(jí)的。

至于剩下的Getter、Module目前好像還沒有怎么用到，就下次用了體驗(yàn)了過(guò)后再說(shuō)吧。

二、Vuex中的輔助函數(shù)

在vuex中所有的輔助函數(shù)都只有一個(gè)目的，方便你我他

1、mapState

當(dāng)我們需要在一個(gè)頁(yè)面中獲取store中的多個(gè)狀態(tài)時(shí)，怎么辦

// bad
this.$store.state.a
this.$store.state.b
this.$store.state.c
// good
computed:{
    ...mapState({
        a:state=>state.a,
        b:state=>state.b,
        c:state=>state.c
    })
}

但是這個(gè)地方有一個(gè)坑，如果a是一個(gè)對(duì)象

a:{
    d:1,
    e:{
        f:2
    }
}
computed:{
    ...mapState({
        f:state=>state.a.e.f
    })
}

這樣是不行的，具體為什么我也不是很清楚，求大佬講解

未完待續(xù)...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97491.html

相關(guān)文章

  • 2019前端秋季社招面試經(jīng)歷總結(jié)（三年經(jīng)驗(yàn)）

    摘要：經(jīng)歷月份開放的簡(jiǎn)歷，收到了蠻多詢問(wèn)和面試，算是招人旺季，需要跳槽的小伙伴抓住機(jī)會(huì)?，F(xiàn)在是面試了家公司左右，有些高頻問(wèn)題會(huì)標(biāo)記次數(shù)總次數(shù)，可供大家參考。最后祝大家面試順利，拿到心儀的，寫錯(cuò)的地方請(qǐng)不吝賜教，謝謝。 經(jīng)歷 7月份開放的簡(jiǎn)歷，收到了蠻多詢問(wèn)和面試，算是招人旺季，需要跳槽的小伙伴抓住機(jī)會(huì)。一開始廣泛看面試題，沒抓住重點(diǎn)復(fù)習(xí)，有很多平時(shí)也沒怎么用到，導(dǎo)致一開始面試的時(shí)候，問(wèn)的問(wèn)題...

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

  • 2019前端秋季社招面試經(jīng)歷總結(jié)（三年經(jīng)驗(yàn)）

    摘要：經(jīng)歷月份開放的簡(jiǎn)歷，收到了蠻多詢問(wèn)和面試，算是招人旺季，需要跳槽的小伙伴抓住機(jī)會(huì)?，F(xiàn)在是面試了家公司左右，有些高頻問(wèn)題會(huì)標(biāo)記次數(shù)總次數(shù)，可供大家參考。最后祝大家面試順利，拿到心儀的，寫錯(cuò)的地方請(qǐng)不吝賜教，謝謝。 經(jīng)歷 7月份開放的簡(jiǎn)歷，收到了蠻多詢問(wèn)和面試，算是招人旺季，需要跳槽的小伙伴抓住機(jī)會(huì)。一開始廣泛看面試題，沒抓住重點(diǎn)復(fù)習(xí)，有很多平時(shí)也沒怎么用到，導(dǎo)致一開始面試的時(shí)候，問(wèn)的問(wèn)題...

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

  • 2019前端秋季社招面試經(jīng)歷總結(jié)（三年經(jīng)驗(yàn)）

    摘要：經(jīng)歷月份開放的簡(jiǎn)歷，收到了蠻多詢問(wèn)和面試，算是招人旺季，需要跳槽的小伙伴抓住機(jī)會(huì)?，F(xiàn)在是面試了家公司左右，有些高頻問(wèn)題會(huì)標(biāo)記次數(shù)總次數(shù)，可供大家參考。最后祝大家面試順利，拿到心儀的，寫錯(cuò)的地方請(qǐng)不吝賜教，謝謝。 經(jīng)歷 7月份開放的簡(jiǎn)歷，收到了蠻多詢問(wèn)和面試，算是招人旺季，需要跳槽的小伙伴抓住機(jī)會(huì)。一開始廣泛看面試題，沒抓住重點(diǎn)復(fù)習(xí)，有很多平時(shí)也沒怎么用到，導(dǎo)致一開始面試的時(shí)候，問(wèn)的問(wèn)題...

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

  • 項(xiàng)目經(jīng)驗(yàn)總結(jié)

    摘要：項(xiàng)目中前端開發(fā)問(wèn)題經(jīng)驗(yàn)總結(jié)下的安全限制問(wèn)題問(wèn)題描述數(shù)據(jù)看板中的數(shù)據(jù)大部分都是實(shí)時(shí)數(shù)據(jù)或前一天統(tǒng)計(jì)的歷史數(shù)據(jù)，因此這邊后端考慮采用來(lái)實(shí)時(shí)和定時(shí)推送數(shù)據(jù)來(lái)保證數(shù)據(jù)的實(shí)時(shí)性和有效性。 項(xiàng)目中前端開發(fā)問(wèn)題經(jīng)驗(yàn)總結(jié) ie下websocket的安全限制問(wèn)題 問(wèn)題描述：數(shù)據(jù)看板中的數(shù)據(jù)大部分都是實(shí)時(shí)數(shù)據(jù)或前一天統(tǒng)計(jì)的歷史數(shù)據(jù)，因此這邊后端考慮采用websocket來(lái)實(shí)時(shí)和定時(shí)推送數(shù)據(jù)來(lái)保證數(shù)據(jù)的實(shí)時(shí)...

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

  • Python面試經(jīng)驗(yàn)總結(jié)，面試一時(shí)爽，一直面試一直爽！

    摘要：面試的心得體會(huì)簡(jiǎn)歷制作我做了兩份簡(jiǎn)歷，用兩個(gè)手機(jī)賬號(hào)，兩個(gè)簡(jiǎn)歷名字，分別在各個(gè)招聘網(wǎng)站投了雙份簡(jiǎn)歷，一個(gè)是數(shù)據(jù)分析的簡(jiǎn)歷一個(gè)是全棧開發(fā)的簡(jiǎn)歷，我真正接觸快年，不管是學(xué)習(xí)還是工作學(xué)到的東西，這兩年大概掌握了前端爬蟲數(shù)據(jù)分析機(jī)器學(xué)習(xí)技術(shù)， showImg(https://upload-images.jianshu.io/upload_images/13090773-b96aac7e974c...

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

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

0條評(píng)論

FrancisSoung

男|高級(jí)講師

TA的文章

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