Vuet 1.x升级指南

前言

在经过众人的支持，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 {}
                            }
                        }
                    }
                }
            }
        })复制代码