vuex的映射,vue映射函数
这篇文章主要介绍了总结某视频剪辑软件映射的方法与混入的使用过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue映射方法与混入使用垂直选择中的内容封装某视频剪辑软件混入的简单用法自定义混入全局混入
vue映射方法与混入使用
v-select中的内容封装
场景：当在不同的组件中共同使用一些挑选的内容就可以将这些内容封装在一个文件里
1.cig2.0/src/contants.js
导出常量数据={
是否：[
//是/否
{值：1,标签: 是 },
{值：0,标签: 否 }
],
小时：[
{值："0",标签:"0"},
{值："1",标签:"1"},
{值："2",标签:"2"},
{值："3",标签:"3"},
{值："4",标签:"4"},
{值："5",标签:"5"},
{值： 6 ,标签: 6 },
{值： 7 ,标签: 7 },
{值："8",标签:"8"},
{值："9",标签:"9"},
{值： 10 ,标签: 10 },
{值： 11 ,标签: 11 },
{值： 12 ,标签: 12 },
{值： 13 ,标签: 13 },
{值： 14 ,标签: 14 },
{值： 15 ,标签: 15 },
{值： 16 ,标签: 16 },
{值： 17 ,标签: 17 },
{值： 18 ,标签: 18 },
{值： 19 ,标签: 19 },
{值： 20 ,标签: 20 },
{值： 21 ,标签: 21 },
{值： 22 ,标签: 22 },
{值： 23 ,标签: 23 }
],
//分钟
分钟：[
{值："0",标签:"0"},
{值： 30 ,标签: 30 }
],
};
导出函数获取值(键){
//调试器
返回JSON。解析(JSON。stringify(data[key] [])；
}
2.在需要使用select的组件里引入【混入】
在混入文件里返回封装的挑选的内容应用到组件中使用挑选的地方
引入混入：
从" @/mixins/mix-search.js "导入MixSearch
设mix search=mix search()；//因为在混合-搜索。射流研究…文件里导出默认值是一个函数()
mixins: [mixSearch]
从" @/contents . js "导入{getValues}
let cache={}
函数saveCache(键，值){
如果(!键)返回；
如果（值){
cache[key]=JSON。字符串(值)
}否则{
如果(!缓存[键])返回
返回JSON.parse(cache[key])
}
}
导出默认功能（外部){
ext=ext {}
let mixin={
data() {
返回{
fullscreenLoading: false，
页面Bean: {
页面大小：10,
第一页，
showTotal: true
},
搜索模型：JSON。解析(JSON。stringify(ext))
}
},
方法：{
异步负载(fn，失败){
尝试{
this.fullscreenLoading=true
等待fn()
} catch (e) {
控制台。错误(五)
}
this.fullscreenLoading=false
},
getKeyValues(key，opt) {
返回获取值(键，选项)
},
//映射字段
getSelectLabel(类型，id) {
对于(设I=0；我类型。长度；i ) {
如果（键入[我].value==id) {
返回类型[我].标签
}
}
}
},
已创建(){
设{pageBean，searchModel}=saveCache(这个. options.name) {}
if (pageBean) {
这个。页面bean=页面bean；
这个。搜索模型=搜索模型；
}
},
销毁前(){
saveCache(这个$options.name，{pageBean: this.pageBean，searchModel: this.searchModel})
}
}
返回混合
}
div style= display:flex；对齐-内容：靠左
El-表单-项目标签=更新时间期限： class=dataTimeBox
埃尔-选择
占位符=请选择
v-model=日.小时
el选项
getKeyValues(hour )中的v-for=(item，index)
:key=index
:label=item.label
:value=item.value
/el选项
/el-select
时间/跨度
El-选择
Placeholder=请选择
v-model=日.分钟
el选项
getKeyValues(minute )中的v-for=(item，index)
:key=index
:label=item.label
:value=item.value
/el选项
/el-select
分钟/跨度
/El-表单-项目
/div
vue混入的简单用法
vue的官方文档：mixin提供了一种非常灵活的方式来分发Vue组件中的可重用功能。混合对象可以包含任何组件选项。当组件使用混合对象时，混合对象的所有选项都将“混合”到组件本身的选项中。
简单的理解就是可以做一个可复用的功能，可以在各种组件中复用。同时，这个mixin函数可以使用vue组件中的任何组件选项，比如数据、方法、手表以及各种生命周期函数。引用需要使用的组件时，相当于将mixin的各种组件选项合并到被引用的组件中。
自定义混入
1.定义一个mixin文件，把需要复用的函数写出来；
2.将其引入到需要使用混合功能的文件中；
注意：您可以将一个或多个类或者仅方法和函数放入混合中。根据面向对象单责任原则和开放封闭原则，排除掉多个类。如果只放方法和函数，blending就失去了类的意义。
最后的结论是：最好把一个类或者多个类组合或聚合而成的类放在混合体中。
3.可以在组件中修改混合数据，也可以直接在混合文件中修改相应组件中的数据；
全局混入
定义一个全局混合文件
将定义的mixins文件引入到项目main.js文件中。
然后项目中的所有文件都可以直接使用blending中定义的方法。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。