vuejs模块化管理 辅助函数 / 映射函数 sass库
- 1.模块化管理状态
- 2.辅助函数/映射函数
- 3.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({-----实例化vuexstate:{ ----------存储数据},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 sass2. 在组件内的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>