Actions et Axios dans Vuex

L'un des cinq concepts de base de Vuex action，peut opérer des opérations asynchrones arbitraires, similaires mutationsmais au lieu mutationsde faire des opérations asynchrones.

Les actions asynchrones sont en fait similaires aux mutations. La différence est que les mutations sont des opérations synchrones et peuvent modifier directement l'état, tandis que les actions prennent en charge les opérations asynchrones, mais ne peuvent pas modifier directement l'état. Les actions soumettent donc des mutations.

---

Voici la suite de l'article précédent , simulez un morceau de données JSON via php et utilisez les actions dans l'entrepôt de données pour obtenir les données

1. Supprimez d'abord les marchandises dans l'état de la page dans un tableau vide, puis simulez et générez une donnée JSON en php

<?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. Définir une méthode dans les mutations dans Vuex pour obtenir des données

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

3. Utilisez async dans les actions de Vuex et appelez la méthode sendData

Définissez la méthode loadingGoods dans les actions, utilisez axios pour envoyer une requête asynchrone dans cette méthode et appelez les données du serveur

La méthode écrite en actions a deux fonctions : 1. Traiter avec le serveur 2. Traiter les 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. Exécutez cette méthode dans la fonction de cycle de vie du composant racine

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

            },