Vuex使用總結

M先生1號發表於2019-05-22
Vue

 

Vuex 是什麼？

　　Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

Vuex的五個核心概念

　　1.State： Vuex使用單一狀態樹，使用一個物件包含了所以的應用狀態。至此它便作為唯一的資料來源而存在，即每個應用中只存在一個State物件。

　　2.Getter：相當於Vue中的computed（計算屬性），在Vue元件中讀取狀態更多是通過getters而不是直接讀取State中的資料。例：

　　　　

computed： {
  count () {
     return this.$store.getters.count
     // return this.$store.state.count  //通常使用getters獲取狀態 而不是直接讀取state中的狀態值  
  }
}

　　3.Mutation：Vuex中更改狀態的唯一途徑， 與Vue中的methods很像，你可以在其中定義改變狀態的方法（每個方法都可接收兩個引數（state， [data 可不寫]））。例：

　　　　

mutation: {
    increment (state) {
      // 變更狀態
      state.count++
    }
}

　　4.Action：雖然Mutation可改變Vuex的狀態值，但是隻能實現同步操作，在很多時候需要用到非同步，因此需要action，主要有兩個作用：

  • Action 提交（commit）的是 mutation，而不是直接變更狀態。
  • Action 可以包含任意非同步操作。

　　5.Module： 由於Vuex使用單一狀態樹，應用的所有狀態都會集中到一個物件中，當應用十分複雜時state物件會變得十分龐大。為了解決這個問題Vuex允許將store分成模組module，每個模組有state，getter，mutation，action。也可以巢狀子模組，從上至下以同樣的方法分割。

　　

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

專案結構

　　

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API請求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我們組裝模組並匯出 store 的地方
    ├── actions.js        # 根級別的 action
    ├── mutations.js      # 根級別的 mutation
    └── modules
        ├── cart.js       # 購物車模組
        └── products.js   # 產品模組

 

相關文章