案例,vuex获取并存储服务器数据

本文详细介绍了如何使用Vuex从服务器获取数据并进行存储的六个步骤,包括组件中分发任务到store,编写actions获取数据库数据,通过mutations处理数据,确保state已有数据且类型匹配,组件中获取state数据,以及在模板中使用这些数据。
摘要由CSDN通过智能技术生成

步骤一: 组件中,挂载时 store分发任务

 //页面挂载时候,分发任务:获取目录数据
        mounted(){
            this.$store.dispatch('categoryList');
        },

步骤二:vuex中,编写actions代码,获取数据库数据+逻辑判断

const actions={
     async categoryList(context){
        //通过await调用异步函数时,直接将promise的数据返回
        const result=await reqCategoryList()
        if(result.code==200){
            context.commit('CATEGORYLIST',result.data);}     
    }
};

步骤三:编写mutations代码,获取修改数据

const mutations={
    CATEGORYLIST(state,categoryList){
        //将数据存储到vuex中
     state.categoryList=categoryList;
    }
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值