vue轻量级状态管理包pinia

2021年10月29日 vue3.0 pinia

轻量级状态管理包pinia的使用

1、定义存放数据的接口

interface Demo{
    /** 注释  QueryParam 也是接口定义**/
    queryParm:QueryParm;
    
    /** 加载状态 **/
    isLoading:boolean;
    
    /** 返回结果 **/
    myList:string[];
}

2、定义store,引用pinia中的defineStore方法 对应MVVM架构的M层

export const useDemoStore = defineStore({
    /** 先确定id **/
    id:'demostore',
    
    /** 状态存放在这里 **/
    state:(): Demo = >({
        queryParm:new QueryParm(),
        isLoading:false,
        myList:[],
    }),
    
    /** 用于获取状态 虽说我不咋用 **/
    getters:{
        result():QueryParm{
            return this.queryparm;
        },
    },
    
    /** 存放请求等 以及对状态的操作 **/
    actions:{
       /** 设置状态 **/
        setQueryParm(value:Queryparm){
            this.queryparm = value;
        }
        
        /** 重置请求参数 **/
        resetQueryParam(){
            this.queryParm = new QueryParm;
        }
        
        /** 请求 **/
        async query(){
            if(!this.queryParm) return;
            const param = {
                /** 这玩意是适配器将前端的数据转换成后端需要的样子 **/
                ...new QueryParmAdapter().compose(this.querypram);
            }
            try{
                this.isLoading = true;
                /** 接口封装用的yapi工具生成的 **/
                const result = await API.demoApi(
                    param,
                );
                if(!(result&& result)) return;
                /** 适配器将后端返回的数据转换成前端需要的样子 **/
                const res = new QueryParamAdapter().parse(this.querypram);
                this,myList  = res;
            }catch(error){
                console.error(error)
            }finally{
                this.isloading = false;
            }
        }
    }
})

3、适配器职责就是桥梁把数据变成需要的样子

export default class QueryParamAdapter(){
    /** Before 前端的接口类型 After后端接口需要的类型 **/
    compose(value:Before)：After{
        const vo:After = {
            demo:value.demo,
        }
        
        return vo;
    }
    
    pose(value:AfterRes):BeforeRes{
        const vo:BeforeRes = {
            reslut:value.reslut
        }
        
        return vo;
    }
}

4、vue文件template对应View层，typescript对应VM层

<template>
    <div>
        {{JOSN.stringify(result)}}
    </div>
</template>
<stript lang="ts">
import {defineComponent} from 'vue';
import useDemoStore from './useDemoStore';
    
export default defineComponent({
    setup(){
        /** 引用 **/
        const demoStore = useDemoStore();
        /** 当其中的值变化会计算并返回新的值 **/
        const result = computed(()=>{
            return demoStore.myList;
        }
        return {
            result,
        }
    }
})
</stript>
<style lang="less"></style>

直接在md文件写的可能会有错误