Vuex笔记(三)--- actions和mutations交互时候,传递的是一个包含数据的对象

actions和mutations交互时候,传递的是一个包含数据的对象。这个对象包含不同数据。
eg.
state.js: 保存数据

const state = {
    foods: [],
    shops: []
}
export default state

问题就是mutations.js里面:
1.第二个参数foods是用{}包住,foods传递的是一个包含数据的对象。
2.第二个参数shops是直接传递对象名,因此接收到的是object。

mutations.js:

import * as types from './mutation-types'
export default {
    [types.SET_FOODS] (state, {foods}) {
        state.foods = foods
    },
    [types.SET_SHOPS] (state, shops) {
        state.shops = shops
    }
}

vue-devtools 显示数据:
foods获取的:
在这里插入图片描述
shops获取的:
在这里插入图片描述
actions.js:
actions里面的是同一结构:

import * as types from './mutation-types'

const actions = {
  // 异步获取分类列表
  async getFoods ({commit}) {
    // 发送异步ajax请求
    const result = await reqFoods()
    // 提交一个mutation
    if (result.code === 0) {
      const foods = result.data
      commit(types.SET_FOODS, {foods})
    }
  },

  // 异步获取商家列表
  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(types.SET_SHOPS, {shops})
    }
  }
}
export default actions

你可能感兴趣的:(vue笔记)