使用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'])
}