状态机的使用

最新推荐文章于 2024-05-03 11:47:20 发布

吃够了没

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量143

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_59761769/article/details/126426165

版权

project.js

export default{
    //命名空间
    namespace:true,

    //维护组件之间的公共状态
    state:{
        productData:[],
    },

    //动作 发送异步请求 拿到数据通过突变提交给state中的数据
    actions:{
        async getAllProductData({commeit},payload){
            let res = await get('地址',payload);
            //console.log(res);
            commit('SET_PRODUCTDATA',res.data.data.list)
        }
    },
      
    //突变 唯一修改state的方式 同步操作
    mutations:{
        SET_PRODUCTDATA(state,payload){
            state.prodectData = payload
        }
    }
}

index.js

//引入产品管理模块
import project from './product/product'

//将产品模块放入modules
modules:{
    product,
}

home.vue

methods:{
    //引入查询所有产品方法
    ...mapActions('product',['getAllProductdata'],

    //查询所有产品方法
    findAllProduct(){
        let params = {
            page:1,
            pageSize:100
        }
        this.getAllProjectData(params)
    }
}

//调用
created(){
    this.findAllProject()
}

//引入产品数据
computed:{
    ...mapState('product',['productData'])
}