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",(切记）

License

This content is released under the MIT License.