vuex核心是什么

這篇文章主要介紹“vuex核心是什么”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vuex核心是什么”文章能幫助大家解決問(wèn)題。

vuex是專門幫助vue管理的一個(gè)js庫(kù)，利用了vue.js中細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來(lái)進(jìn)行高效的狀態(tài)更新。

vuex核心就是store，store就是個(gè)倉(cāng)庫(kù)，這里采用了單一的store狀態(tài)樹(shù)，一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)，這也就使得每個(gè)應(yīng)用僅僅包含一個(gè)store實(shí)例，這種單一狀態(tài)樹(shù)可以讓我們直接定位任意的代碼片段，在調(diào)試過(guò)程中就可以輕松的取得當(dāng)前應(yīng)用的快照。

const store = new Vuex.Store({

  state: {

    count: 0

  },

  mutations: {

    increment(state) {

      state.count++

    }

  },

  actions: {

    asyncIncrement({ commit }) {

      setTimeout(() => commit('increment'), 100);

    }

  }

})

 state為vuex中唯一的數(shù)據(jù)源，和vue中state的規(guī)則一致，都是響應(yīng)式的，正因?yàn)槿绱耍瑅ue component 可以通過(guò) computed屬性來(lái)返回在vuex中讀取的值，從而響應(yīng)式的跟隨state的變化進(jìn)行渲染 ，除此之外我們還需要從store中的state派生一些狀態(tài)，比如過(guò)濾篩選數(shù)據(jù)，vuex允許我們?cè)趕tore定義getter，可以認(rèn)為是store的一個(gè)計(jì)算屬性，所以getter中的返回值會(huì)根據(jù)他的依賴被緩存起來(lái)，只有等它的依賴發(fā)生變化時(shí)，才會(huì)被重新計(jì)算，這些都是vuex讀取操作。

那么vuex中是如何修改狀態(tài)的呢？

更改vuex狀態(tài)的唯一方法是mutation，vuex中的mutation 非常類似于事件，每個(gè)mutation都有一個(gè)字符串的事件類型，和一個(gè)回調(diào)函數(shù)，我們可以通過(guò)store的commit方法同步修改store的數(shù)據(jù)，這里需要注意的是mutation必須是一個(gè)同步函數(shù)，正因?yàn)閙utation是同步的，我們可以在vuex中提供的插件機(jī)制去訂閱mutation變化，在這些plugins中我們可以進(jìn)行打點(diǎn)或者做數(shù)據(jù)監(jiān)聽(tīng)相關(guān)的工作。

那么vuex中如何完成異步操作呢？

vuex是讓action來(lái)完成異步操作，我們可以通過(guò)store的dispatch方法來(lái)觸發(fā)相應(yīng)的action的操作，然后在action中完成類似接口獲取或者異步操作，在異步操作完成后的回調(diào)函數(shù)中使用commit觸發(fā)mutation變更state中的數(shù)據(jù)。

關(guān)于“vuex核心是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。