uniapp - mixins 混合篇

大家好!我是 rookie——fly,我一直坚持技术分享,为此坚持不懈!本篇是 继 uniapp -ajax 篇的第二篇
本篇文章适合人群:vue和小程序技术框架人群
从本篇文章可以获得:如何在uniapp项目中使用混入

全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用。

混入文件目录

1|--mixins
2     |---- userInfo.js
3     |---- 各种混入...

全局混合

参考:Vue 全局混合

局部混合

在需要混合的组件内混入步骤:
1.首先从mixins导入 userInfo.vue
2.在组件内注册混入文件,mixins: [userInfo],
3.使用混合的属性和方法

userInfo.js

 1export default {
2    data() {
3        return {
4            userInfonull //用户信息
5        };
6    },
7    computed: {
8        //用户角色
9        userRole() {
10           return userInfo? userInfo.role :'暂无角色'
11        }
12    },
13    async created() {
14        this.getUserInfo();
15    },
16    methods: {
17        /**
18         * 获取用户信息
19         */

20        getUserInfo(){
21            this.api.getUserInfo()
22            .then(res=>{
23
24                 this.userInfo= res.data.userInfo;
25            }).catch(err=>{
26                console.log(err)
27            })
28        },  
29    }
30};

混合到指定组件

举个例,我们混入到index.vue组件

 1<template>
2   <view>
3      {{ userRole }}
4   </view>
5</template>
6<script>
7import userInfo from "@/mixins/userInfo.vue";
8export default {
9   data(){
10      return {
11
12      }
13   },
14   mixins: [ userInfo ],
15}
16
</script>

结语

知道的越多,知道的越少!