Uni-next-vue NPM

Uni-Next-Vue

Use luo-next-vue in uniapp
一: 方便的进行组件通讯（父传子，子传父，兄弟，祖孙）通用
二: 方便的使用vuex
三: 方便使用组件缓存
四: 方便使用vuex缓存
五: 路由缓存可配置

Install

npm install uni-next-vue -S

Usage

一：创建并注入

import creatNextVue from 'uni-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',
});

Vue.use(MyPlugin);

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

二：组件内使用
export default {
  name: 'Test',
  luoOptions: {
    transmits: {
      sssk (va) {
        this.aa += va;
      },
      ef (va) {

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

属性

名称	类型	默认值	说明
key	String		本地缓存名
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根实例对象名称

组件属性

名称	类型	说明
luoOptions	Object	使用时设置的对象
luoOptions【transmits】	Object	组件通讯时调用的方法名配置
luoOptions【stores】	Array	vuex动态注入的配置（值为字符串类型，且路径要以@开头)
luoOptions【isNoCache】	Boolean	组件不缓存

组件通讯

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,
    })
  },
}

页面缓存（路由缓存）

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);
  }
}

如何获取指定组件

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);

提示和注意点

一：一定要设置组件的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一定要在界面上使用过，不然获取不到缓存
十一：获取组件缓存只在同一路由树下有效
十二：本地缓存名（key),务必使用域名前缀+"__"开头，如域名是"http://www.taobao.com/alipay/"则名为"www__alipay",(切记）