Vuex最新实例

使用vuex管理状态

|-- store
	|-- index.js  vuex最核心的管理对象store
	|-- state.js 状态对象
	|-- getters.js 包含多个基于state的getter计算属性的对象
	|-- mutations.js 直接更新state的多个方法的对象
		|-- mutation-types.js 包含n个mutation的type名称常量
	|-- actions.js 通过mutation间接更新state的多个方法的对象

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutaions from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex)

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

state.js

export default {
    latitude: 23.2344, // 纬度
    longitude: 22.3344, // 经度
    address: {}, // 地址相关信息对象
    categorys: [], // 食品分类数组
    shops: [] // 商家数组
}

mutation-types.js

export const RECEIVE_ADDRESS = 'receive_address' // 接收地址
export const RECEIVE_CATEGORYS = 'receive_categorys' // 接收食品分类数组
export const RECEIVE_SHOPS = 'receive_shops' // 接收商家数组

mutation.js

import {
    RECEIVE_ADDRESS,
    RECEIVE_CATEGORYS,
    RECEIVE_SHOPS
} from './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
    }
}

actions.js

import {
    RECEIVE_ADDRESS,
    RECEIVE_CATEGORYS,
    RECEIVE_SHOPS
} from './mutation-types'

//  引入请求数据的api
import  {
    reqAddress,
    reqFoodCategorys,
    reqShops
} from '../api'

export default {
    // 异步获取地址
    async getAddress({commit, state}) {
        //  发送异步ajax请求
        const geohash  = state.latitude + ',' + state.longitude
        const result = await reqAddress(geohash)
        // 提交一个mutation
        if(result.code === 0 ){
            const address = result.data
            commit(RECEIVE_ADDRESS, {address})
        }
    },
    // 异步获取实物列表
    async getCategorys ({commit}) {
        // 发送异步ajax请求
        const result = await reqFoodCategorys()
        //  提交一个mutation
        if(result.code === 0){
            const categorys = result.data
            commit(RECEIVE_CATEGORYS,{categorys})
        }
    },
    // 异步获取商家列表
    async getShops ({commit, state}) {
        // 发送异步的ajax请求
        const {longitude, latitude} = state
        const result = await reqShops(longitude, latitude)
        // 提交一个mutation
        if(result.code === 0){
            const shops = result.data
            commit(RECEIVE_SHOPS,{shops})
        }
    }
}

main.js

import store from './store'

new Vue({
    store // 注册vuex
})

App.vue

## 第一种方式
mounted () {
    this.$store.dispatch('getAddress')
}
## 第二种方式
import {mapActions} from 'vuex'
mounted (){
    this.getAddress()
},
methods: {
    ...mapActions(['getAddress'])
}