Vuex基本使用的總結--轉載

在 Vue 的單頁面應用中使用，需要使用Vue.use(Vuex)呼叫插件，
使用非常簡單，只需要將其注入到Vue根實體中，

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
getter: {
    doneTodos: (state, getters) => {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: {
    increment (state, payload) {
      state.count++
    }
  },
actions: {
  addCount(context) {
    // 可以包含異步操作
    // context 是一個與 store 實體具有相同方法和屬性的 context 物件
  }
}
})
// 注入到根實體
new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

然后改變狀態：

this.$store.commit('increment')

Vuex 主要有四部分：

1. state：包含了store中存盤的各個狀態，
2. getter: 類似于 Vue 中的計算屬性，根據其他 getter 或 state 計算回傳值，
3. mutation: 一組方法，是改變store中狀態的執行者，
4. action: 一組方法，其中可以含有異步操作，

state

Vuex 使用 state來存盤應用中需要共享的狀態，為了能讓 Vue 組件在 state更改后也隨著更改，需要基于state創建計算屬性，

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count  // count 為某個狀態
    }
  }
}

getters

類似于 Vue 中的 計算屬性，可以在所以來的其他 state或者 getter改變后自動改變，
每個getter方法接受 state和其他getters作為前兩個引數，

getters: {
    doneTodos: (state, getters) => {
      return state.todos.filter(todo => todo.done)
    }
  }

mutations

前面兩個都是狀態值本身，mutations才是改變狀態的執行者，mutations用于同步地更改狀態

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

其中，第一個引數是state，后面的其他引數是發起mutation時傳入的引數，

this.$store.commit('increment', 10)

commit方法的第一個引數是要發起的mutation名稱，后面的引數均當欄位外資料傳入mutation定義的方法中，
規范的發起mutation的方式如下：

store.commit({
  type: 'increment',
  amount: 10   //這是額外的引數
})

額外的引數會封裝進一個物件，作為第二個引數傳入mutation定義的方法中，

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

actions

想要異步地更改狀態,需要使用action，action并不直接改變state，而是發起mutation，

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

發起action的方法形式和發起mutation一樣，只是換了個名字dispatch，

// 以物件形式分發
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

action處理異步的正確使用方式

想要使用action處理異步作業很簡單，只需要將異步操作放到action中執行（如上面代碼中的setTimeout），
要想在異步操作完成后繼續進行相應的流程操作，有兩種方式:

1. action回傳一個 promise，
   而dispatch方法的本質也就是回傳相應的action的執行結果，所以dispatch也回傳一個promise，

   store.dispatch('actionA').then(() => {
   // ...
   })
   

 2. 利用async/await，代碼更加簡潔，     

// 假設 getData() 和 getOtherData() 回傳的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

各個功能與 Vue 組件結合

　　將state和getter結合進組件需要使用計算屬性： 

computed: {
    count () {
      return this.$store.state.count 
      // 或者 return this.$store.getter.count2
    }
  }

將mutation和action結合進組件，需要在methods中呼叫this.$store.commit()或者this.$store.commit():

methods: {
    changeDate () {
        this.$store.commit('change');
    },
    changeDateAsync () {
        this.$store.commit('changeAsync');
    }
}

為了簡便起見，Vuex 提供了四個方法用來方便的將這些功能結合進組件，

1. mapState
2. mapGetters
3. mapMutations
4. mapActions

示例代碼：

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

// ....
computed: {
  localComputed () { /* ... */ },
  ...mapState({
    // 為了能夠使用 `this` 獲取區域狀態，必須使用常規函式
    count(state) {
      return state.count + this.localCount
    }
  }),
  ...mapGetters({
    getterCount(state, getters) {
      return state.count + this.localCount
    }
  })
}
methods: {
  ...mapMutations({
       add: 'increment' // 將 `this.add()` 映射為`this.$store.commit('increment')`
    }),
  ...mapActions({
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
    })
}

如果結合進組件之后不想改變名字，可以直接使用陣列的方式，

methods: {
    ...mapActions([
      'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`

      // `mapActions` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
    ]),
}

將 store分割為模塊，

可以將應用的store分割為小模塊，每個模塊也都擁有所有的東西:state, getters, mutations, actions，
首先創建子模塊的檔案：

// initial state
const state = {
  added: [],
  checkoutStatus: null
}
// getters
const getters = {
  checkoutStatus: state => state.checkoutStatus
}
// actions
const actions = {
  checkout ({ commit, state }, products) {
  }
}
// mutations
const mutations = {
  mutation1 (state, { id }) {
  }
}
export default {
  state,
  getters,
  actions,
  mutations
}

然后在總模塊中引入：

import Vuex from 'vuex'
import products from './modules/products' //引入子模塊

Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    products   // 添加進模塊中
  }
})

其實還存在命名空間的概念，大型應用會使用，需要時查看檔案即可，Vuex的基本使用大致如此， 

標籤：JavaScript

上一篇：jquery類操作

下一篇：webpack代碼分離CommonsChunkPlugin插件的使用（防止重復）