JS每日一題：什么情況下適合使合vuex？Vuex使用中有幾個步驟？

wow_worktile 發(fā)布于2019-08-23 15:22 / 951人閱讀

摘要：什么情況下適合使合使用中有幾個步驟開始之前先簡單了解一下定義是一個狀態(tài)管理機制采用集中式存儲應(yīng)用所有組件的狀態(tài)嗯，就是一句話能說明白的，沒明白的，我們用代碼再理解一下什么叫集中式式存儲比如下面這段代碼，同時需要用到，那么我們首先能想到就是在

20190121

什么情況下適合使合vuex？Vuex使用中有幾個步驟？

開始之前先簡單了解一下vuex

定義: vuex是一個狀態(tài)管理機制,采用集中式存儲應(yīng)用所有組件的狀態(tài)

嗯，就是一句話能說明白的，沒明白的，我們用代碼再理解一下什么叫集中式式存儲

比如下面這段代碼，同時需要用到username，那么我們首先能想到就是在兩個組件內(nèi)都進行一次獲取username的操作, 這種操作是有明顯弊端的, 如帶寬資源浪費，代碼不好維護等等

// a.vue


// b.vue

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

// a.vue


// b.vue

什么情況下適合使合vuex

老生常談的話題，每個人的使用動機不同可能結(jié)果就不同，站在系統(tǒng)架構(gòu)的角度上來，vuex雖然能很好幫助我們管理狀態(tài), 但隨之也帶來更多的概念讓我們花時間來消化，一般情況下我們會根據(jù)項目的實際大小來決定是否需要引入vuex

Vuex使用中有幾個步驟

先上一張圖理解一下vuex工作的流程

從圖中我們可以看到vuex包含了3個關(guān)鍵詞

state

actions

mutations

只要知道就行，后面再展開講

先看下最簡單使用vuex的方式

// store.js
// store中管理store以及mutations, 然后在組件中通過commit來觸發(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)，上面也說了vuex是集中式管理，那么在這里就理解成為集中管理的狀態(tài)(全局可使用狀態(tài))

組件中獲取狀態(tài)可以通過以下方式

const Demo = {
  template: `{{ name }}`,
  computed: {
    name () {
      return store.state.name
    }
  }
}

// 也可以通過mapState 輔助函數(shù)來獲取

  computed: mapState({
      name: state => state.name
  })
  
// 引入多個state可以通過對象展開運算符來獲取
  computed: {
      ...mapState({
        name
        // ...
      })
  }

mutations

更改vuex中的store的唯一途徑就是mutation,且必須是同步函數(shù)

代碼理解

  // 首先mutations 是一個對象
  // 下面的updateName 展開寫就是 updateName : function(){}, 在vuex叫做Type Handler
  // 根據(jù)上一條的解釋，所以會看到很多mutations的寫法類 [GET_USER_INFO] : (state) => {}
  // 你不能直接調(diào)用mutations.updateName, 因為mutations 只負責注冊事件,需要通過store.commit(type) 來喚醒對應(yīng)type的handler
  // Mutation 需遵守 Vue 的響應(yīng)規(guī)則,也就是說沒有被Object.defineProperty 劫持到的state不會響應(yīng)式, 比如你有一個state為obj = {}, 然后你通過mutation來為obj新增一個屬性，
  這時候你需要替換原有的obj組件才會正常響應(yīng)，
  常用的方式可以通過Object.assign()
  mutations: {
    updateName (state) {
      state.name = "JS每日一題"
    }
  }
  
  // 組件中可以通過mapMutaions 輔助函數(shù)來映射關(guān)系
  // 下面等同于 this.updateName()  this.$store.commit("updateName")
  methods: {
      ...mapMutaions([
        "updateName",
        ...
      ])
  }

Action

Action 類似于 mutation，提交的是 mutation，而不是直接變更狀態(tài)。簡單來說就是mutation只負責同步操作，action負責異步操作

  mutations: {
    updateName (state) {
      state.name = "JS每日一題"
    }
  },
  actions: {
    // context是一個具有store 實例相同方法和屬性的對象
    getUserInfo (context) {
          setTimeout(() => {
              commit("updateName")
          }, 1000)
    }
  }
  
  // 組件中可以通過mapActions 輔助函數(shù)來映射關(guān)系
  // 下面等同于 this.getUserInfo()  this.$store.commit("getUserInfo")
  methods: {
      ...組件中可以通過mapActions([
        "getUserInfo",
        ...
      ])
  }

總結(jié)

vuex是一種狀態(tài)管理機制，將全局組件的共享狀態(tài)抽取出來為一個store，以一個單例模式存在，應(yīng)用任何一個組件中都可以使用，vuex更改state的唯一途徑是通過mutation，mutation需要commit觸發(fā), action實際觸發(fā)是mutation，其中mutation處理同步任務(wù)，action處理異步任務(wù)

關(guān)于JS每日一題

JS每日一題可以看成是一個語音答題社區(qū)
每天利用碎片時間采用60秒內(nèi)的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

注絕不僅限于完成當天任務(wù)，更多是查漏補缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點擊加入答題