博客

步骤一: 组件中，挂载时 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;
    }
};

步骤四：修改数据前，state必要先有数据，并且数据类型一致

const state={categoryList:[],};

步骤五：组件页面中，获取state的数据

//使用mapState快速获取store的state数据
import { mapState } from 'vuex';

//计算属性 搭配...mapState（）一起使用
 computed:{
            ...mapState({categoryList:(state)=>{
                console.log(state.homeStore.categoryList);
                 return state.homeStore.categoryList;}})
        }

​​​​​​

步骤六：模板中，使用vuex的state数据

<div class="item bo" v-for="c1 in categoryList" :key="c1.categoryId">
                            <h3>
                                <a href="">{{ c1.categoryName }}</a>
                            </h3>