搞一下vue生態，從vuex開始

只做你的向日葵發表於2022-01-02
Vue

Vuex

vuex 是專門幫助vue管理的一個js庫，利用了vue.js中細粒度資料響應機制來進行高效的狀態更新。

vuex核心就是store，store就是個倉庫，這裡採用了單一的store狀態樹，一個物件就包含了全部的應用層級狀態，這也就使得每個應用僅僅包含一個store例項，這種單一狀態樹可以讓我們直接定位任意的程式碼片段，在除錯過程中就可以輕鬆的取得當前應用的快照。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => commit('increment'), 100);
    }
  }

})

 state為vuex中唯一的資料來源，和vue中state的規則一致，都是響應式的，正因為如此，vue component 可以通過 computed屬性來返回在vuex中讀取的值，從而響應式的跟隨state的變化進行渲染 ，除此之外我們還需要從store中的state派生一些狀態，比如過濾篩選資料，vuex允許我們在store定義getter，可以認為是store的一個計算屬性，所以getter中的返回值會根據他的依賴被快取起來，只有等它的依賴發生變化時，才會被重新計算，這些都是vuex讀取操作。

那麼vuex中是如何修改狀態的呢？

更改vuex狀態的唯一方法是mutation，vuex中的mutation 非常類似於事件，每個mutation都有一個字串的事件型別，和一個回撥函式，我們可以通過store的commit方法同步修改store的資料，這裡需要注意的是mutation必須是一個同步函式，正因為mutation是同步的，我們可以在vuex中提供的外掛機制去訂閱mutation變化，在這些plugins中我們可以進行打點或者做資料監聽相關的工作。

那麼vuex中如何完成非同步操作呢？

vuex是讓action來完成非同步操作，我們可以通過store的dispatch方法來觸發相應的action的操作，然後在action中完成類似介面獲取或者非同步操作，在非同步操作完成後的回撥函式中使用commit觸發mutation變更state中的資料。

搞一下vue生態，從vuex開始

程式碼示例已放在我的gitee上了

vuex初始化的基本結構

使用mapState, mapGetters, mapMutations, mapActions解構操作簡化程式碼

使用子元件通過vuex代理設定父元件的狀態

小結

  • State: Store中唯一資料來源，響應式。
  • Getter: 有State派生出的狀態，store的計算屬性
  • Mutations: 由commit觸發，必須是同步函式，是修改state值的唯一方式
  • Actions: 由dispatch觸發，可以處理服務API等任何非同步操作，不直接更改state，是通過Mutation 中 commit去變更資料

思考

mutations可以修改state的值，而state是響應式的，在vue component宣告計算屬性就可以自動獲取state的值並進行檢視渲染，那麼vue的這種響應式如何與vue的響應式串聯起來呢，使得vuex的變化同步到元件當中，本文就不再繼續深挖了，目前是剛接觸vue，如果大家有什麼好的建議歡迎留言評論。

 

以上就是通過學習vuex基礎整理的筆記，供學習參考，文中示例多處引用，請謹慎轉載。

相關文章