Luo-Next-Vue-Vite

提示：因正在做vue3兼容升级，请下载3.0.0以下版本，否则可能无法运行！！！

Expand Vue to make your Vue project fly
一: 可配置element-ui 按需加载
二: 方便的进行组件通讯（父传子，子传父，兄弟，祖孙）通用
三: 方便的使用vuex
四: 方便使用组件缓存
五: 方便使用vuex缓存
六: 路由缓存可配置

Install

npm install luo-next-vue-vite -S

Usage

一：创建并注入

import creatNextVue from 'luo-next-vue-vite';

const {MyPlugin, store} = creatNextVue({
  key: 'www__alipay',           
  vuex: {
    strict: true,
    vuexKey: 'vuexData',                                         
  },
  vue: {
    vueKey: 'vueData'
  },
  route: {
    routeKey: 'cachePathData',
    cacheFixedPathsData: ['/test1', '/test2', '/testnpm'],
    chacheChangePathsData: ['/test2', '/fdsfdsf'],
  },
  rootVue: 'vm',
  excludeUpCacheStateNodeIdent: ['-El'],
  excludeUpCacheStateNodeNames: ['Bar', 'Main', 'Header', 'HeadRight', 'LAside', ],
  refUrlName: 'refUrl',
  goUrlName: 'goUrl',
});

Vue.use(MyPlugin);

new Vue({
  el: '#app',
  store,
  render: h => h(App)
});

二：组件内使用
import { Button, Input } from 'element-ui';
export default {
  name: 'Test',
  luoOptions: {
    elementUi: [Button, Input],
    transmits: {
      sssk (va) {
        this.aa += va;
      },
      ef (va) {

      }
    },
    stores: ['@/store/testnpm', '@/store/test2'],
  },
  data () {
    return {
      aa = 1;
    }
  }
}

属性

| 名称 | 类型 | 默认值 | 说明 | | ---------- | ---- | ------- | ----------- | | key | String | | 本地缓存名（一级）,务必使用域名前缀+"__"开头，如域名是"http://www.taobao.com/alipay/"则名为"www__alipay"| | storage | Function | | 缓存方式(localStorage和sessionStorage)| | vuex | Object | | vuex的配置 | | vuex【strict】 | Boolean | true | vuex是否设置严格模式 | | vuex【vuexKey】 | String | vuexData | vuex的缓存名（二级） | | vue | Object | | vue的配置 | | vue【vueKey】 | String | | vue的缓存名（二级） | | route | Object | | 路由缓存配置 | | route【routeKey】 | String | | 路由的缓存名（二级） | | route【cacheFixedPathsData】 | Array | | 需要缓存的路由地址（固定） | | route【chacheChangePathsData】 | Array | | 需要缓存的路由地址（动态，可设增加或减少） | | rootVue | String | | vue根实例对象名称 | | refUrlName | String | | 页面刷新标识名 | | goUrlName | String | | 页面前进标识名 | | excludeUpCacheStateNodeNames | String | 排除更新缓存的Tag名称 | | excludeUpCacheStateNodeIdent | String | 排除更新缓存的插件Tag标识 |

组件属性

| 名称 | 类型 | 默认值 | 说明 | | ---------- | ---- | ------- | ----------- | | luoOptions | Object | | 使用时设置的对象| | luoOptions【elementUi】 | Array | | element-ui按需加载的配置（需先引入）| | luoOptions【transmits】 | Object | | 组件通讯时调用的方法名配置| | luoOptions【stores】 | Array | | vuex动态注入的配置（值为字符串类型，且路径要以@开头)| | luoOptions【isNoCache】 | Boolean | | 组件不缓存 |

element-ui 按需加载

<el-button type="primary" :loading="true">加载中</el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>

import { Button, Input } from 'element-ui';
export default {
  name: 'Test',
  luoOptions: {
    elementUi: [Button, Input]
  }
}

mint-ui 按需加载

<mt-button size="small">small</mt-button>

import { Button } from 'mint-ui';
export default {
  name: 'Test',
  luoOptions: {
    mintUi: [Button]
  }
}

组件通讯

A组件 =》
export default {
  name: 'Test',
  luoOptions: {
    transmits: {
      xxxx (va) {
        this.aa += va;
      }
    }
  },
  mounted () {
    this.events.$emit('zzzz', 1);
    this.events.$emit('xxxx', 1);
    this.events.$emit('kkkk', 1);
  }
}

B组件 =》
<template>
  <div>
    <test key="t1"></test>
  </div>
</template>

import Text2 from '@/views/Test2';
export default {
  name: 'Test',
  luoOptions: {
    transmits: {
      zzzz (va) {
        this.aa += va;
      }
    }
  },
  mounted () {
    this.events.$emit('zzzz', 1);
    this.events.$emit('xxxx', 1);
    this.events.$emit('kkkk', 1);
  }
  components: {
    test: Text2
  }
}

C组件 =》
export default {
  name: 'Test',
  luoOptions: {
    transmits: {
      kkkk (va) {
        this.aa += va;
      }
    }
  },
  mounted () {
    this.events.$emit('zzzz', 1);
    this.events.$emit('xxxx', 1);
    this.events.$emit('kkkk', 1);
  }
}

vuex使用

一：testnpm.js
export default {
  namespaced: 'testnpm',
  cache: true,                // 可选（默认为不缓存）
  state: { 
    aa: 222
  }, 
  mutations: {
    xxx (state, va) {
      state.aa += va;
      // commit('account/login')
    } 
  },
  actions: {
    login ({ dispatch, commit }, va) {
      // dispatch('account/login')
    } 
  },
  getters: {
    
  },
  modules: {
    myPage: {
      state: {
        ma: 1,
      },
    },
    posts: {
      namespaced: true,
      state: { 
        mb: 2,
      },
    }
  }
}

二：组件内使用
export default {
  name: 'Test',
  luoOptions: {
    stores: ['@/store/testnpm', '@/store/test2'],
  },
  mounted () {
    console.log(this.$store.state.testnpm);
    this.$store.commit('testnpm/xxx', 1);
    this.$store.dispatch('testnpm/login', 2);
  },
  computed: {
    ...mapState('testnpm', {
      a: state => state.aa,
    })
  },
}

多线程

一：使用 (子线程执行完会自动清除)
let va = 1;         // 对应argA参数
let vb = 2;         // 对应argB参数
const worker = this.$worker.run((argA, argB) => {
  console.log(argA);
  console.log(argB);
}, [va, vb]).then((res) => {     // res为线程函数返回值
  console.log(res);
}).catch((e) => {
  console.log(e);
});
二：清除
worker = null;

页面缓存（路由缓存）

const {MyPlugin, store} = creatNextVue({
  route: {
    routeKey: 'cachePathData',
    cacheFixedPathsData: ['/test1', '/test2', '/testnpm'],
    chacheChangePathsData: ['/fdsafdaf'],
  }
});

Vue.use(MyPlugin);

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

如何获取组件缓存（同一路由树下有效）

export default {
  name: 'Test',
  mounted () {
    var stateCache = this.$LuoGetStateCache(); 
    console.log(stateCache);
    var stateCacheB = this.$LuoGetStateCache('Test2'); 
    console.log(stateCacheB);
    var stateCacheC = this.$LuoGetStateCache('Test3', 'key'); 
    console.log(stateCacheC);
    var stateCacheD = this.$LuoGetStateCache('Test3', 'key', '/home/page'); 
    console.log(stateCacheD);
  }
}

如何获取vuex缓存

export default {
  name: 'Test',
  mounted () {
    var storeCache = this.$LuoGetStoreCache();
    console.log(stateCache);
  }
}

页面刷新/前进/关闭事件

export default {
  name: 'Test',
  data () {
    return {
      aa: 0
    }
  }
}

二：页面刷新事件
this.$routeMode('refresh', () => {
  this.aa = 1;
}));

二：浏览器前进事件
this.$routeMode('forward', () => {
  this.aa = 2;
}));

三：页面刷新和浏览器前进事件 
this.$routeMode('all', () => {
  this.aa = 3;
}));

三：页面关闭事件
this.$routeMode('close', () => {
  event.returnValue = "确定离开当前页面吗？";
}));

如何获取指定组件

let component = this.$LuoFindComponent('Test');

如何获取指定父组件

let parent = this.$LuoFindParentsComponent(this, 'Test');

如何设置字符串对象

一：覆盖模式

let context = this;
let data = this.$LuoSetStringObject(context, 'a.b.c', 'hello');
console.log(this.a.b.c);
console.log(data);

二：叠加模式

let context = this;
let data = this.$LuoSplicStringObject(context, 'implemenData.exciting.dataB.calendarData', {test: 1, test2: 2});
console.log(this.implemenData.exciting.dataB.calendarData);
console.log(data);

iframe事件

第一种方式：
父页面=》
<iframe name="luo_iframe_up_2019_11_9_4_34" src="/template-frontent/upImg" frameBorder="no" width="590" height="160" onhancomplete="testEvent"></iframe>

function testEvent (e, va, vb) {
  console.log(e);
  console.log(va);
  console.log(vb);
}
子页面=》
export default {
  name: 'Test',
  created () {
    this.$triggerIframeEvent('hancomplete', 1, 2);
  }
}

第二种方式：
父页面=》
<iframe name="luo_iframe_up_2019_11_9_4_34" src="/template-frontent/upImg" frameBorder="no" width="590" height="160" onhancomplete="function (e, va, vb) {
        console.log(e);
        console.log(va);
        console.log(vb);
    }"></iframe>

子页面=》
export default {
  name: 'Test',
  created () {
    this.$triggerIframeEvent('hancomplete', 1, 2);
  }
}

设置iframe信息

export default {
  name: 'Test',
  created () {
    this.$setIframeInfo('test', 1);
    this.$setIframeInfo('test.a', 1);
    this.$setIframeInfo('test.a.b', 1);
    this.$setIframeInfo('test.a.b', {a: 2}, true);     // 叠加模式
  }
}

提示和注意点

一：一定要设置组件的name属性才能使用，且第一个字母为大写
二：组件通讯时和使用组件缓存时，如果同一路由下有相同组件,一定要设置key属性，不然取到的缓存都是一样的，（示例如下）
    <template>
      <div>
        <test key="t1"></test>
        <test key="t2"></test>
      </div>
    </template>
三：组件通讯最好是在mounted及mounted之后进行
四：没有设置路由缓存的路由下，都可以获取组件缓存
五：vuex的缓存是全局的,包括路由跳转（如果想清除，可以用store.registerModule卸载），使用是自已确定的，要不要使用vuex缓存是自己确定，本页面如果没用vuex缓存，但是本页面又改变了store状态，也会存入到缓存中，其它页面用到此vuex模块时，用到的缓存是改变之后的状态
六：vuex模块文件一定要设置namespaced名称，使用时的格式是namespaced名+方法名，如：this.$store.dispatch('testnpm/login', 2);
七：vuex模块默认都是带命名空间的模块；
八：cacheFixedPathsData属性的值是固定的（实际是可以改变的，不推荐改变，），chacheChangePathsData里的路由可以包含在cacheFixedPathsData里，cacheFixedPathsData里的值也可以包含在chacheChangePathsData里，作用是可以动态的调整路由缓存，(暂时不提供动态设置的方法，因为时间关系，后续会提供)比如横向标签的使用
九：路由缓存如果是带参路由，要写全，如：
    cacheFixedPathsData: ['/test1/:aa/:bb/:cc', '/test2', '/testnpm'],
    chacheChangePathsData: ['/test2/:kk', '/fdsfdsf/:jj/:kk'],
十：缓存的data一定要在界面上使用过，不然获取不到缓存
十一：如某些组件不想更新缓存可设置 excludeUpCacheStateNodeNames
十二：如更新缓存不想更新一些插件的缓存（如element-ui)可设置 excludeUpCacheStateNodeIdent  排除标识
十三：iframe默认以__LUO__IFRAME为全局变量用于储存信息（建议iframe的name设置为唯一性）
十四：获取组件缓存只在同一路由树下有效
十五：本地缓存名（key),务必使用域名前缀+"__"开头，如域名是"http://www.taobao.com/alipay/"则名为"www__alipay",(切记）

License

This content is released under the MIT License.