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 {}
                            }
                        }
                    }
                }
            }
        })複製代碼