day48（vueJS）模块化管理状态 辅助函数 / 映射函数 sass库

1.模块化管理状态

1.1要点总结

1. 步骤：(模块化管理状态强调模块化开发思想)
  1. 按照state中不同的数据，将getters，mutations，actions，state中的内容拆分，组成单个对象，放入不同的js文件并导出，每个文件代表一条数据的管理模块（modules和plugins只能写在vuex实例化的入口文件，单数据管理模块不需要这两部分，这些单个的管理模块只需要getters，mutations，actions，state四部分即可）
  2. 将放置数据的js文件分别导入回vuex实例化的入口文件中，并在modules对象中注册，入口文件中保留getters，mutations，actions，state这四个部分，但空置不写内容
  3. 在每条数据的整合对象中加入namespaced:true;这条语句，代表开启模块化
2. 使用：（开启模块化之后state数据，同步异步方法和计算方法的获取与调用方式与未开启模块化不同）
  1. 同步异步方法的触发：
    1. this.$store.commit('模块名/触发的同步方法名',传入参数);
    2. this.$store.dispatch('模块名/触发的异步方法名',传入参数);
  2. state数据的获取：
    1. this.$store.state.模块名.数据名;
  3. 计算方法的获取：
    1. this.$store.getters['模块名/方法名'];

2.2代码演示

vuex入口文件.js（vuex实例化的文件）
import { createStore,createLogger } from 'vuex'
import historylist from './modules/historylist'-----导入拆分出去的模块
import tasklist from './modules/tasklist'
export default createStore({-----实例化vuex
    state:{ ----------存储数据

    },
    getters:{ ----------定义计算方法( 类似于组件中的计算属性 )

    },
    mutations:{ ------------定义同步方法
        
    },
    actions:{ ------------定义异步方法

    },
    modules:{ --------------以模块化的方式管理state中的数据
        hl:historylist,
        tl:tasklist
    },
    plugins:[ -----------集成第三方插件 来管理state中的数据
        createLogger()
    ] 
})
historylist这条数据的管理模块（这是一个js文件( 模块 ) , 负责管理historylist这个数据）
export default {---------将该条数据与其相关方法整合到一个对象中并导出
    namespaced:true,-----------该属性开启模块化
    state:{ ----------存储数据
        historylist:[],
    },
    getters:{ ------------定义计算方法( 类似于组件中的计算属性 )
      
    },
    mutations:{ ---------------定义同步方法
        addHistory( state, payload ){------------新增历史记录
            state.historylist.push(payload);
        }
    },
    actions:{ --------------定义异步方法

    }
}
tasklist这条数据的管理模块 （这是一个独立的js文件( 模块 ), 单独管理tasklist这个数据）
export default {
    namespaced:true,---------------开启模块化
    state:{ -----------存储数据
        tasklist:[ /* { id:1, name:'', status:false } */ ]
    },
    getters:{ -----------定义计算方法( 类似于组件中的计算属性 )
        totalCount(state){-------------统计任务总数
            return state.tasklist.length;
        },
        finishedCount(state){----------统计已完成任务数量
            return state.tasklist.filter(item=>item.status).length;
        },
        unfinishedCount(state){--------统计未完成任务数量
            return state.tasklist.filter(item=>!item.status).length;
        }
    },
    mutations:{ ---------------定义同步方法
        addTask( state, payload ){----------新增任务
            if( payload ){
                var obj = { id: state.tasklist.length + 1 ,name: payload, status:false  };-----构造一个新的任务对象
                state.tasklist.push( obj );--------添加新的任务对象 到任务列表中
            }
        },
        changeTaskStatus( state, payload ){---------------更改任务状态
            var task = state.tasklist.find( item=>item.id == payload );--------根据id 找到需要更改状态的任务对象
            if( task ){----------更改任务对象的状态
                task.status = !task.status;
            }
            console.log( task,payload );
        },
        deleteTask( state, payload ){---------------删除任务
            var i = state.tasklist.findIndex(item=>item.id == payload);-------根据id找到 需要删除的元素位置(下标)
            if( i != -1 ){------------------删除对应位置的任务对象
                state.tasklist.splice(i,1);
            }
        }
    },
    actions:{ ------------------------定义异步方法
    }
}

模块化方法的使用
组件内
export default {
    data(){
        return {
            taskname:''
        }
    },
    methods:{
        handleAdd(){
            this.$store.commit('tl/addTask', this.taskname );-----------触发同步方法(调用同步方法)，在触发方法名前加上模块名/
            this.$store.commit('hl/addHistory', this.taskname );---------触发同步方法(调用同步方法)
            this.taskname = '';-----------清空输入框的值
        }
    }
}
模块化计算方法的使用
<template>
  <div class="summary">
    <span>全部( {{ $store.getters['tl/totalCount'] }} )</span>------------调用方法：$store.getters['模块名/方法名']
    <span>已完成( {{ $store.getters['tl/finishedCount'] }} )</span>
    <span>未完成( {{ $store.getters['tl/unfinishedCount'] }} )</span>
  </div>
</template>
模块化数据的使用
<template>
  <div class="tasklist">
动态渲染任务列表( 从vuex中获取 )
    <div class="task" v-for="(item,index) in $store.state.tl.tasklist" :key="index">--------模块化之后只需要多加一个模块名即可：$store.state.模块名.计算方法名
        <div class="left">
            <input type="checkbox" :checked="item.status" @click="handleClick(item.id)">
            <span>{{item.name}}</span>
        </div>
        <span @click="handleDelete(item.id)">删除</span>
    </div>
   
  </div>
</template>

2.辅助函数/映射函数

2.1.要点总结—

概念与作用：映射函数又称辅助函数，是vuex提供的方法，主要用于简化组件内使用到vuex中数据是多次重复的this.$store，降低代码冗余。
原理：映射函数将简化后的写法转化成原本调用vuex实例内数据和方法的标准语法然后执行，这就是映射的过程
语法：（映射的功能相当于直接在methods与computed中定义目标方法）
未模块化时
同步方法：methods:{...mapMutations(["同步方法名","同步方法名","同步方法名",.....])}
异步方法：methods:{...mapActions(['异步方法名','异步方法名','异步方法名',....])}
state数据：computed:{...mapState(['数据名','数据名','数据名',......])}
计算方法：computed:{...mapGetters(['计算方法名','计算方法名','计算方法名',.....])}
模块化时
同步方法：methods:{...mapMutations('模块名',["同步方法名","同步方法名","同步方法名",.....])}
异步方法：methods:{...mapActions('模块名',['异步方法名','异步方法名','异步方法名',....])}
state数据：computed:{...mapState('模块名',['数据名','数据名','数据名',......])}
计算方法：computed:{...mapGetters('模块名',['计算方法名','计算方法名','计算方法名',.....])}

2.2.代码演示—

<template>
  <div class="summary">
    <span>全部( {{ totalCount }} )</span>------计算方法使用方式类似于组件内的计算属性
    <span>已完成( {{ finishedCount }} )</span>
    <span>未完成( {{ unfinishedCount }} )</span>
  </div>
</template>

<script>
从vuex导入 辅助函数(映射函数)
import { mapGetters } from 'vuex';-------mapGetters() 从vuex中获取(映射)计算方法到组件的computed中
export default {
  computed:{
    ...mapGetters('tl',['totalCount','finishedCount','unfinishedCount'])----------调用方法，在方法前添加扩展运算符，因为该方法调用返回一个对象，需要将对象内的方法展开才能使用。该方法在模块化时接受两个参数，第一个参数时方法对应的模块名，第二个参数是罗列方法名的数组;
  }
}
</script>
<template>
  <div class="tasklist">
    <div class="task" v-for="(item,index) in tasklist" :key="index">------使用映射函数之后的state数据可以直接使用在组件模板中
        <div class="left">
            <input type="checkbox" :checked="item.status" @click="handleClick(item.id)">
            <span>{{item.name}}</span>
        </div>
        <span @click="handleDelete(item.id)">删除</span>
    </div> 
  </div>
</template>

<script>
从vuex导入 辅助函数(映射函数)
import { mapMutations,mapState } from 'vuex';------mapState() 从vuex中获取(映射)state到组件的computed中
export default {
    computed:{
        ...mapState('tl',['tasklist'])
    },
    methods:{
        ...mapMutations('tl',['changeTaskStatus','deleteTask']),
        handleClick(id){
            this.changeTaskStatus(id);----------使用映射函数之后可以直接调用映射过的方法
        },
        handleDelete(id){
            this.deleteTask(id);
        }
    }
}
</script>

3.sass库

3.1.要点总结–

sass库：一种用于优化css样式中选择器嵌套冗余代码的插件，他可以优化样式代码选择器嵌套冗余，并且能够体现标签的嵌套关系
Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它在 CSS 的基础上增加了许多功能和特性，使得 CSS 更加强大、灵活和易于维护。
作用：
  1. Sass 支持嵌套规则，可以减少 CSS 代码的层级，让代码更加清晰易读；
  2. Sass 支持变量、函数和表达式，可以方便地定义和使用样式参数；
  3. Sass 支持继承和混合，可以将一些常用的样式定义成可复用的模板，提高代码的效率和可维护性；
  4. Sass 支持模块化和导入，可以将样式文件分成多个模块，方便管理和维护；
  5. Sass 支持条件语句和循环语句，可以根据不同的条件生成不同的样式；
  6. 简化 CSS 开发，提高开发效率；
  7. 提高 CSS 代码的可读性和可维护性；
  8. 方便地定义和使用样式参数，提高代码的灵活性；
  9. 可以将样式文件分成多个模块，方便管理和维护；
使用步骤：
  1. 指令：npm i sass
  2. 在组件内的style标签上添加：lang='scss';这条语句，注意属性值是scss而不是sass，因为使用scss可以时样式语句高亮更明显，易于检查错误，sass高亮不太明显
1. 支持
  1. 选择器嵌套
  2. 定义变量，变量可以进行加减乘除运算，在sass中所有变量以$开头，冒号后面写值，css中的宽高内外间距和边框等都可以用变量给值
  3. 支持定义函数，所有的指令前面需要加上@，比如@function函数指令，@return返回指令，
  4. 支持条件语句if，else if等
  5. 支持for循环语句。

3.2.代码演示–

<style scoped lang='scss'>
$p:10px;------------定义变量, 变量可以进行加减乘除运算
@function calcNum( $param ){------------定义函数
    @return $param * 2;
}
选择器嵌套
.input-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $p;
    input{
        height: $p*4;
        outline: none;
        border-radius: $p/2;
        border: 1px solid #ccc;
        padding-left: calcNum($p);-------------------调用函数
        flex:1;
    }
    span{
        width: $p*6;
        text-align: center;
    }
}
</style>