Vuet 1.x升级指南

时间 2019-12-19

标签 vuet 1.x 升级指南繁體版

原文原文链接

前言

在通过众人的支持，Vuet 1.x也发布一周多的时间了，在这个大版本中，Vuet获得了很大的瘦身，主要是去掉了manual规则，将模块的方法直接内置成模块的一部分，route规则和v-vuet-scroll指令将提取出来成为第三方的插件，在此基础上，使得状态测试变得更加简单。javascript

将来发展的规划

新增状态测试案例，致力于Vuet成为一个成熟的vue状态管理模式（可能会提供专门的测试插件）
新增vuet-store规则（插件的形式），使用localStorage，让模块的状态进行持久化
新增vuet-timing规则（插件的形式），让模块定时更新状态
新增reset规则（内置Vuet），组件销毁时，重置模块状态，这个能够有效的减小内存的开销

github:Vuetvue

升级指南

manual规则已废弃java

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中剔除，须要安装第三包才能实现git

npm install --save vuet-route复制代码

安装route规则github

import Vuet from 'vuet'
  import VuetRoute from 'vuet-route'
  // 安装规则，必须在全部组件加载以前执行，不然会提示找不到规则
  Vuet.rule('route', VuetRoute)复制代码

配置相关npm

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中剔除，须要安装第三包才能实现bash

npm install --save vuet-scroll复制代码

安装v-vuet-scroll指令app

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写法fetch

const vuet = new Vuet({
          modules: {
              parent: { // 父模块
                  data () {
                      return {}
                  },
                  modules: { // 子模块，必须在modules中显示定义
                      chlid: {
                          data () {
                              return {}
                          }
                      }
                  }
              }
          }
      })复制代码