# luo-next-vue > Expand Vue to make your Vue project fly Latest version **3.0.3** (published 2023-01-31) · MIT license · 0 weekly downloads ## Install ```sh npm install luo-next-vue pnpm add luo-next-vue yarn add luo-next-vue bun add luo-next-vue ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.0.3 | | Published | 2023-01-31 | | First published | 2019-07-19 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 6 | | Unpacked size | 19.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Lihua Luo | | Maintainers | luo195289 | | Keywords | vue, vuex, plugin, vuex-persistedstate, luo-ergodic-tree, luo-web-worker | ## Links - npm: https://www.npmjs.com/package/luo-next-vue - npm.io page: https://npm.io/package/luo-next-vue ## Dependencies (6) - [vue](https://npm.io/package/vue.md) ^3.2.40 - [vuex](https://npm.io/package/vuex.md) ^4.0.2 - [deepmerge](https://npm.io/package/deepmerge.md) ^3.1.0 - [luo-web-worker](https://npm.io/package/luo-web-worker.md) ^1.0.3 - [luo-ergodic-tree](https://npm.io/package/luo-ergodic-tree.md) ^1.0.3 - [luo-vuex-persistedstate](https://npm.io/package/luo-vuex-persistedstate.md) 0.0.4 ## Alternatives - [cron](https://npm.io/package/cron.md) — 4.9M weekly downloads - [@vercel/queue](https://npm.io/package/@vercel/queue.md) — 731.6K weekly downloads - [create-sonicjs](https://npm.io/package/create-sonicjs.md) — 1.6K weekly downloads - [@exellix/jobs-api](https://npm.io/package/@exellix/jobs-api.md) — 941 weekly downloads - [@forwardimpact/libskill](https://npm.io/package/@forwardimpact/libskill.md) — 575 weekly downloads ## Recent versions - 3.0.3 (latest) — 2023-01-31 - 3.0.2 — 2022-10-15 - 3.0.1 — 2022-10-11 - 3.0.0 — 2022-10-11 - 0.5.2 — 2021-09-04 - 0.5.1 — 2021-08-04 - 0.5.0 — 2021-08-04 - 0.4.9 — 2021-03-26 - 0.4.8 — 2020-03-13 - 0.4.7 — 2020-02-28 - 0.4.6 — 2020-01-07 - 0.4.5 — 2020-01-07 - 0.4.4 — 2020-01-01 - 0.4.3 — 2019-12-31 - 0.4.1 — 2019-12-31 - … 39 more at https://npm.io/package/luo-next-vue/versions ## README # Luo-Next-Vue 提示：因正在做vue3兼容升级，请下载3.0.0以下版本，否则可能无法运行！！！ > Expand Vue to make your Vue project fly > 一: 可配置element-ui 按需加载 > 二: 方便的进行组件通讯（父传子，子传父，兄弟，祖孙）通用 > 三: 方便的使用vuex > 四: 方便使用组件缓存 > 五: 方便使用vuex缓存 > 六: 路由缓存可配置 ## Install ```bash npm install luo-next-vue -S ``` ## Usage ```js 一：创建并注入 import creatNextVue from 'luo-next-vue'; 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 按需加载 ```js 加载中 搜索 import { Button, Input } from 'element-ui'; export default { name: 'Test', luoOptions: { elementUi: [Button, Input] } } ``` ## mint-ui 按需加载 ```js small import { Button } from 'mint-ui'; export default { name: 'Test', luoOptions: { mintUi: [Button] } } ``` ## 组件通讯 ```js 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组件 =》 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使用 ```js 一：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, }) }, } ``` ## 多线程 ```js 一：使用 (子线程执行完会自动清除) 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; ``` ## 页面缓存（路由缓存） ```js 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) }); ``` ## 如何获取组件缓存（同一路由树下有效） ```js 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缓存 ```js export default { name: 'Test', mounted () { var storeCache = this.$LuoGetStoreCache(); console.log(stateCache); } } ``` ## 页面刷新/前进/关闭事件 ```js 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 = "确定离开当前页面吗？"; })); ``` ## 如何获取指定组件 ```js let component = this.$LuoFindComponent('Test'); ``` ## 如何获取指定父组件 ```js let parent = this.$LuoFindParentsComponent(this, 'Test'); ``` ## 如何设置字符串对象 ```js 一：覆盖模式 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事件 ```js 第一种方式： 父页面=》 function testEvent (e, va, vb) { console.log(e); console.log(va); console.log(vb); } 子页面=》 export default { name: 'Test', created () { this.$triggerIframeEvent('hancomplete', 1, 2); } } 第二种方式： 父页面=》 子页面=》 export default { name: 'Test', created () { this.$triggerIframeEvent('hancomplete', 1, 2); } } ``` ## 设置iframe信息 ```js 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); // 叠加模式 } } ``` ## 提示和注意点 ```js 一：一定要设置组件的name属性才能使用，且第一个字母为大写 二：组件通讯时和使用组件缓存时，如果同一路由下有相同组件,一定要设置key属性，不然取到的缓存都是一样的，（示例如下） 三：组件通讯最好是在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](http://opensource.org/licenses/MIT) License. --- _Source: https://npm.io/package/luo-next-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._