前言
在经过众人的支持,Vuet 1.x也发布一周多的时间了,在这个大版本中,Vuet得到了很大的瘦身,主要是去掉了manual
规则,将模块的方法直接内置成模块的一部分,route
规则和v-vuet-scroll
指令将提取出来成为第三方的插件,在此基础上,使得状态测试变得更加简单。
未来发展的规划
- 新增
状态测试
案例,致力于Vuet
成为一个成熟的vue
状态管理模式(可能会提供专门的测试插件) - 新增
vuet-store
规则(插件的形式),使用localStorage,让模块的状态进行持久化 - 新增
vuet-timing
规则(插件的形式),让模块定时更新状态 - 新增
reset
规则(内置Vuet),组件销毁时,重置模块状态,这个可以有效的减少内存的开销
github:Vuet
升级指南
manual规则
已废弃
const vuet new Vuet({ modules: { test: { data () { return { count: 0 } }, // 0.x写法 // 在模块中注入方法:mapRules({ manual: 'test' }) // 组件中调用方法:this.$test.plus() manuals: { plus ({ state }) { state.count++ } }, // 1.x写法,不需要再将方法写到manuals对象下 // 在模块中注入方法:mapModules({ test: 'test' }) // 组件中调用方法:this.test.plus() plus () { this.count++ } } } })复制代码
route规则
已剔除
已经从Vuet中剔除,需要安装第三包才能实现npm install --save vuet-route复制代码
安装route规则
import Vuet from 'vuet' import VuetRoute from 'vuet-route' // 安装规则,必须在所有组件加载之前执行,否则会提示找不到规则 Vuet.rule('route', VuetRoute)复制代码
配置相关
const vuet new Vuet({ modules: { test: { data () { return { list: [], page: 1 } }, // 0.x写法,设置路由变化规则:fullPath = this.$route.fullPath routeWatch: ['fullPath'], // 1.x写法, route: { watch: ['fullPath'], // 设置路由变化规则 once: false // 需要做上拉加载,可以设置成true }, fetch () { // 在组件中,上拉加载事件触发时,调用下面的方法即可 // this.$vuet.getModule('cleartest').route.fetch() // 在组件中,下拉刷新加载事件触发时,调用下面的方法即可 // this.$vuet.getModule('cleartest').route.reset() this.app.$route // 取得路由对象,你可以在这里发起http请求 setInterval(() => { this.list = [...this.list, ...[this.page]] this.page++ }, 1000) } } } })复制代码
v-vuet-scroll
已剔除
已经从Vuet中剔除,需要安装第三包才能实现npm install --save vuet-scroll复制代码
安装
v-vuet-scroll
指令import Vue from 'vue' import VuetRoute from 'vuet-route' Vue.use(VuetScroll)复制代码
父子模块
0.x写法const vuet = new Vuet({ modules: { parent: { // 父模块 data () { return {} }, chlid: { // 子模块 data () { // 在0.x中,一个模块对象中,存在一个data的方法会被认为是一个模块 return {} } } } } })复制代码
1.x写法
const vuet = new Vuet({ modules: { parent: { // 父模块 data () { return {} }, modules: { // 子模块,必须在modules中显示定义 chlid: { data () { return {} } } } } } })复制代码