Vue中使用Vuex管理狀態

1、下載 Vuex

npm install --save vuex

2、定義 state

store/state.js

/*
狀態對象
 */
export default {
  latitude: 32.10038, // 緯度
  longitude: 107.36867, // 經度
  address: {}, // 地址信息對象
  categorys: [], // 分類數組
  shops: [] // 商家數組
}

2、定義 mutation-types

store/mutation-types.js

/*
包含n個mutation的type名稱常量
 */
export const RECEIVE_ADDRESS = 'receive_address' // 接收地址信息
export const RECEIVE_CATEGORYS = 'receive_categorys' // 接收分類數組
export const RECEIVE_SHOPS = 'receive_shops' // 接收商家數組

3、定義 mutations

store/mutations.js

/*
直接更新state的多個方法的對象
 */
import {
  RECEIVE_ADDRESS,
  RECEIVE_CATEGORYS,
  RECEIVE_SHOPS
} from '@/store/mutation-types'

export default {
  [RECEIVE_ADDRESS] (state, {address}) {
    state.address = address
  },
  [RECEIVE_CATEGORYS] (state, {categorys}) {
    state.categorys = categorys
  },
  [RECEIVE_SHOPS] (state, {shops}) {
    state.shops = shops
  }
}

4、定義 actions

store/actions.js

/*
經過mutation間接更新state的多個方法的對象
 */
import {
  reqAddress,
  reqShops,
  reqCategorys
} from '@/api'
import {
  RECEIVE_ADDRESS,
  RECEIVE_CATEGORYS,
  RECEIVE_SHOPS
} from '@/store/mutation-types'

export default {
  // 異步獲取地址
  async getAddress ({commit, state}) {
    const geohash = state.latitude + ',' + state.longitude
    const result = await reqAddress(geohash)
    if (result.code === 0) {
      const address = result.data
      commit(RECEIVE_ADDRESS, {address})
    }
  },

  // 異步獲取分類列表
  async getCategorys ({commit}) {
    const result = await reqCategorys()
    if (result.code === 0) {
      const categorys = result.data
      commit(RECEIVE_CATEGORYS, {categorys})
    }
  },

  // 異步獲取商家列表
  async getShops ({commit, state}) {
    const {latitude, longitude} = state
    const result = await reqShops({latitude, longitude})
    if (result.code === 0) {
      const shops = result.data
      commit(RECEIVE_SHOPS, {shops})
    }
  }
}

5、定義 store 對象

store/index.js

/*
vuex最核心的管理對象store
 */
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store ({
  state,
  mutations,
  actions,
  getters
})

6、註冊 store

main.js

import store from './store'

new Vue ({
  store
})

7、異步調用

mounted () {
  this.$store.dispatch('getAddress')
}

8、讀狀態

<script>
  import {mapState} from 'vuex'
  
  computed: {
      ...mapState(['address', 'categorys'])
  }
</script>