Vuex 中的 actions 与 Axios

Vuex的五大核心概念之一action，可以操作任意的异步操作，类似于mutations，但是是替代mutations来进行异步操作。

actions异步其实和mutations是类似的，区别在于mutations是同步操作而且可以直接修改状态，而actions支持异步操作，但是不可以直接修改状态，所以actions提交的是mutations。

---

这里接着上一篇文章，通过php模拟一段JSON数据，使用数据仓库中的 actions 拿取数据

1.首先先把页面中state内的goods删除成一个空数组，然后再php中模拟生成一个JSON数据

<?php

//目的：防止页面出现乱码,让数据中的文字正常显示
header('content-type:text/html;charset=utf-8');

$data = array(
    array('id'=>1,'name'=>'戴尔笔记本','money'=>1,'num'=>10,'jiage'=>0),
    array('id'=>2,'name'=>'惠普打印机','money'=>1,'num'=>20,'jiage'=>0),
    array('id'=>3,'name'=>'戴尔台式电脑','money'=>1,'num'=>100,'jiage'=>0)
);


// 转换为JSON格式
echo json_encode($data);

?>

2.在Vuex中的 mutations 定义方法，获取data

sendData(state,param){
                    console.log('仓库中mutations中sendData方法获取到的参数是：')
                    console.log(param.goods)
                    state.goods = param.goods;
                    console.log('--------下面是state中的goods中的内容：-----------')
                    console.log(state.goods)
             
                 }

3.在Vuex中的 actions 中使用异步，调用sendData方法

在actions中定义loadingGoods方法，在该方法中使用axios发送异步请求，调用服务器数据

actions里写的方法 有两个作用：1.和服务器打交道 2.和mutations打交道

 // 1.在仓库中的actions里写方法
            actions:{
                loadingGoods(store){
                    // 使用axios发送异步请求
                    axios.get('./goods.php')
                         .then((response)=>{
                            // console.log(response)
                            store.commit('sendData',{goods:response.data})
                         })
                         .catch((error)=>{
                             console.log(error)
                         })
                }
            }

4.在根组件的生命周期函数中执行这个方法

  // 生命周期钩子函数
            // 2.在根组件的生命周期钩子函数中调用执行这个方法
            mounted(){
                this.$store.dispatch('loadingGoods')
//* dispatch：含有异步操作，例如向后台提交数据，写法this.$store.dispatch('action方法名',值)

            },