优雅的使用vue

我会带着你远行 2023-07-23 12:58 17阅读 0赞

## 1 应不应该使用vuex ##

当全局的变量不超过20,30个时，尽量不要使用vuex，会增加体积。那么有什么方案可以代替vuex呢？

①bus

在main.js全局挂载:Vue.prototype.bus=new Vue();

发送事件:this.bus.$emit('事件名')

接收事件:thia.bus.$on('事件名')

②新建一个store.js

import vue from 'vue';
    
    export const store = vue.observable({a:123});
    export const mutations = {
        changea(){
           store.a=456;
        }
    }

使用变量a:

computed:{
       a(){
         return a;
       }
    }

# #

## 2 针对高频组件的处理 ##

针对需要引用好多次的组件，我们可以在components下边新建一个component，再新建一个index.js集成。

index.js内容

import Vue from 'vue';
    
    function changeStr(str){
       return str.charAt(0).toUpperCase() + str.slice(1);
    }
    
    const requireComponent = require.context('./',false,/\.vue$/);
    const install = {
       requireComponent.keys.forEach(fileName => {
          let config = requireComponent(fileName);
          let componentName = changeStr(fileName.replace(/^\.\//,'').replace(/\.\w+$/,''))
          Vue.component(componentName,config.default || config);
       })
    }
    
    export default { install };

挂载到main.js

import index from 'index.js'
    Vue.use(index);

## 3 有的路由有很多子集路由的处理 ##

新建一个route，下面有每个页面的路由，比如index.routes.js,login.routes.js

每个js的内容如下

export default {
       name:'index',
       path:'/index',
       component:''
    }

在router下新建一个index.js

const routerList = [];
    function importAll(r){
       r.keys().forEach( (key)=>routerList.push(r(key).default))
    }
    importAll(require.context('../route', true, /\.routes\.js/))

## 4 解决template里边一值多判断 ##

新建一个button.vue

引入并使用

import Button from 'button.vue'
    
    <Button :type = type  :text = text></Button>