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

最新推荐文章于 2023-10-11 12:32:48 发布

原创最新推荐文章于 2023-10-11 12:32:48 发布 · 664 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue笔记专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了在Vue项目中使用Vuex进行状态管理的具体实践，包括state、mutations和actions的定义与交互方式，展示了如何通过actions异步获取数据并提交到mutations更新state，以及在actions中如何传递包含数据的对象。

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