阅读 780

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 {}
                              }
                          }
                      }
                  }
              }
          })复制代码