Vue經驗總結

FrancisSoung 發布于2019-08-23 11:48 / 1633人閱讀

摘要：題記前段時間時隔個月重新拾起了，的太好用了。一初體驗以前用慣了的然后突然切換到的真的有點不習慣。可以包含任意異步操作。至于剩下的目前好像還沒有怎么用到，就下次用了體驗了過后再說吧。

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

一、Vuex初體驗

以前用慣了react的dva然后突然切換到vue的vuex真的有點不習慣。

1、Store

這個是vuex中的大哥大，什么都歸它管（state、mutations、getter、action、module），你可以把它理解為一個倉庫（官方文檔也是這么說的）

// 創建stroe
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

2、State

每個Stroe中都會有這么一個狀態樹、對于vue來說他是全局的，對于store來說他是唯一的，我們可以把它理解為倉庫中的貨物，當客戶（vue）中想要取出倉庫（store）中的貨物（state），很簡單this.$stroe.state.test

3、Mutation

mutation 必須是同步函數
更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。這個我們可以把它比喻為一個訂單（Mutation），當客戶（vue）需要改變倉庫（store）中的貨物（state）時，我們就可以通過這個方法去改變，但是這個方法在本地是不能被直接調用的，你需要以相應的 type 調用 store.commit 方法：

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

其實這一點和dva有點相似

4、Action

這個和Mutation和相似，但是：

Action 提交的是 mutation，而不是直接變更狀態。

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

而且actions是與Mutation的觸發方法也不同，它是用的store.dispatch(確認過眼神)，而且它可以調用actions，講道理它是比mutation高一個等級的。

至于剩下的Getter、Module目前好像還沒有怎么用到，就下次用了體驗了過后再說吧。

二、Vuex中的輔助函數

在vuex中所有的輔助函數都只有一個目的，方便你我他

1、mapState

當我們需要在一個頁面中獲取store中的多個狀態時，怎么辦

// 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
    })
}

但是這個地方有一個坑，如果a是一個對象

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

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

未完待續...

云服務器 GPU云服務器經驗總結服務器遷移經驗總結筆試經驗求職經驗

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97491.html

2019前端秋季社招面試經歷總結（三年經驗）

摘要：經歷月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。現在是面試了家公司左右，有些高頻問題會標記次數總次數，可供大家參考。最后祝大家面試順利，拿到心儀的，寫錯的地方請不吝賜教，謝謝。經歷 7月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。一開始廣泛看面試題，沒抓住重點復習，有很多平時也沒怎么用到，導致一開始面試的時候，問的問題...

Kross 2019-08-02 15:41 評論0 收藏0
2019前端秋季社招面試經歷總結（三年經驗）

摘要：經歷月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。現在是面試了家公司左右，有些高頻問題會標記次數總次數，可供大家參考。最后祝大家面試順利，拿到心儀的，寫錯的地方請不吝賜教，謝謝。經歷 7月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。一開始廣泛看面試題，沒抓住重點復習，有很多平時也沒怎么用到，導致一開始面試的時候，問的問題...

DevWiki 2019-08-30 15:44 評論0 收藏0
2019前端秋季社招面試經歷總結（三年經驗）

摘要：經歷月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。現在是面試了家公司左右，有些高頻問題會標記次數總次數，可供大家參考。最后祝大家面試順利，拿到心儀的，寫錯的地方請不吝賜教，謝謝。經歷 7月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。一開始廣泛看面試題，沒抓住重點復習，有很多平時也沒怎么用到，導致一開始面試的時候，問的問題...

solocoder 2019-08-26 10:30 評論0 收藏0
項目經驗總結

摘要：項目中前端開發問題經驗總結下的安全限制問題問題描述數據看板中的數據大部分都是實時數據或前一天統計的歷史數據，因此這邊后端考慮采用來實時和定時推送數據來保證數據的實時性和有效性。項目中前端開發問題經驗總結 ie下websocket的安全限制問題問題描述：數據看板中的數據大部分都是實時數據或前一天統計的歷史數據，因此這邊后端考慮采用websocket來實時和定時推送數據來保證數據的實時...

William_Sang 2019-08-23 15:56 評論0 收藏0
Python面試經驗總結，面試一時爽，一直面試一直爽！

摘要：面試的心得體會簡歷制作我做了兩份簡歷，用兩個手機賬號，兩個簡歷名字，分別在各個招聘網站投了雙份簡歷，一個是數據分析的簡歷一個是全棧開發的簡歷，我真正接觸快年，不管是學習還是工作學到的東西，這兩年大概掌握了前端爬蟲數據分析機器學習技術， showImg(https://upload-images.jianshu.io/upload_images/13090773-b96aac7e974c...

gxyz 2019-07-31 10:28 評論0 收藏0