Vuejs技术栈--状态管理vuex
安装
npm install --save vuex
状态文件:store/state.js
export default { latitude: 40.10038, // 纬度 longitude: 116.36867, // 经度 address: {}, // 地址信息对象 categorys: [], // 分类数组 ... }
记录信号识别常量:store/mutation-types.js
export const RECEIVE_ADDRESS = 'receive_address' // 接收地址信息 export const RECEIVE_CATEGORYS = 'receive_categorys' // 接收分类数组 export const RECEIVE_SHOPS = 'receive_shops' // 接收商家数组
对state的数据处理:store/mutations.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 }, }
逻辑处理:store/actions.js
import {reqAddress, reqCategorys, reqShops} from '../api' import {RECEIVE_ADDRESS, RECEIVE_CATEGORYS, RECEIVE_SHOPS} from './mutation-types' export default { // 异步获取地址 async getAddress({commit, state}) { const geohash = state.latitude + ',' + state.longitude const result = await reqAddress(geohash) commit(RECEIVE_ADDRESS, {address: result.data}) }, // 异步获取分类列表 async getCategorys({commit}) { const result = await reqCategorys() commit(RECEIVE_CATEGORYS, {categorys: result.data}) }, // 异步获取商家列表 async getShops({commit, state}) { const {latitude, longitude} = state const result = await reqShops({latitude, longitude}) commit(RECEIVE_SHOPS, {shops: result.data}) } }
包含多个基于state的getter计算属性的对象:store/getters.js
/* 包含多个基于state的getter计算属性的对象 */ export default { totalCount (state) { return state.cartFoods.reduce((preTotal, food) => preTotal + food.count , 0) }, totalPrice (state) { return state.cartFoods.reduce((preTotal, food) => preTotal + food.count*food.price , 0) }, positiveSize (state) { return state.ratings.reduce((preTotal, rating) => preTotal + (rating.rateType===0?1:0) , 0) } }
把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 })
main.js注册store
import store from './store' new Vue({ store })
https://vuex.vuejs.org/guide/state.html
mapState、mapGetters、mapActions、mapMutations
computed: {
...mapState(['cartFoods', 'info']),
...mapGetters(['totalCount', 'totalPrice'])
}
this.$store.dispatch('getAddress')
或
import {mapAction} from 'vuex'
...mapAction(['getAddress'])