Vue, App与我(六)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/XXJ19950917/article/details/76176940

Vue, App与我(六)

  • Big-man 今天需要义正言辞地扯一下配置文件, 为什么了?
  • 因为Big-man遇到了一个新的问题,需要引入Express.jsExpress.js的介绍请点击——Express.js,利用里面的connect-history-api-fallback等等属性来进行浏览求返回的开发。
  • 接下来就开始拉开序幕。

  • vuet.js的介绍和引入:
  • Vuet是什么?
  • Vuet是Vue.js的一种状态管理模式,它以模块化管理为核心,以规则更新为主,手动更新为辅来进行模块的状态更新,总之它给你提供了一片草原,由你来决定如何驰骋

  • 全局方法
  • Vuet.mapModules(any)
  • 描述: 组件和Vuet的模块连接起来
  • 返回值: Object
  • 例子:
import { mapModules } from 'vuet' // 等同于 Vuet.mapModules

export default {
  // ... 选项
  mixins: [
    mapModules({ '组件注入的名称': '模块的路径' })
  ]
  // 同时还支持以下几种写法
  // mapModules('test') 等同于  mapModules({ test: 'test' })
  // mapModules('test', 'test/chlidren') 等同于  mapModules({ 'test': 'test/chlidren' })
}

  • Vuet.mapRules(any)
    • 描述: 向组件混入模块更新的规则,Vuet内置了routeonceneedlife这几种常见的数据更新规则
    • 返回值: Object
    • 例子:
import { mapRules } from 'vuet' // 等同于 Vuet.mapRules

export default {
  // ... 选项
  mixins: [
    // 完整写法
    mapRules({ '规则名称': [{ path: '更新模块路径' }] })
  ]
  // 同时还支持以下几种简写
  // mapRules('规则名称', '更新的模块路径') 等同于 mapRules({ '规则名称': [{ path: '更新模块路径' }] })
  // mapRules('规则名称', ['更新的模块路径']) 等同于 mapRules({ '规则名称': [{ path: '更新模块路径' }] })
  // mapRules({ '规则名称': '更新模块路径' }) 等同于 mapRules({ '规则名称': [{ path: '更新模块路径' }] })
}

  • life
    • 描述: 每次都会在组件的beforeCreate钩子中调用一次更新,组件销毁时在destroyed钩子,状态会被重置,恢复到初始状态。
  • manual
    • 参数:
    • manuals: Object{name: String | Function}
    • 默认值: $当前模块名称
    • 描述: 在业务中,我们常常需要各种手动更新状态的操作,manual就是将这种更新的操作集中起来。点我查看完整例子,另外还允许在调用mapRules方法时重置名字
    • 例子:
new Vuet({
    modules: {
      name: 'myTest', // 设置在组件中混入的名字
      test: {
        data () {
          return {
            count: 0
          }
        },
        manuals: {
          // ... manual会对fetch、reset、getState、setState方法进行一层封装,自动传入path参数。
          // 同时还提供了`this.mapManuals(path)`方法,可以取得其他模块的manuals,方便互相调用
          plus ({ state, app, vuet }) {
            state.count++
            // 或 this.setState({ count: count })
          },
          reduce ({ state, vm, vuet }) {
            state.count--
          }
        }
      }
    }
  })

  mapRules({
    manual: 'test' // this.myTest.xx

    // 同时还支持重置名字,在组件中调用: this.Test.xx
    // manual: [{ path: 'test', name: 'Test' }]

    // 如果模块中没有设置名称,则默认以[`$${模块名称}`]为默认设置,调用: this.$test.xx
    // manual: 'test'
  })
  • need
    • 描述: 每次都会在组件的beforeCreate钩子中调用一次更新
  • once
    • 描述: 仅第一次在组件的beforeCreate钩子中调用一次更新,之后在任何组件都不会再进行更新
  • route
    • 参数: routeWatch: String | Array[String]
    • 默认值: ‘fullPath’
    • 描述: 页面发生变化的规则
    • 描述:与vue-router模块配合使用,负责统一管理页面切换的状态更新,变化返回请选择this.$route里面的字段,如果页面需要记录滚动条位置的请移步查看v-vuet-scroll指令配合使用
    • 例子:
new Vuet({
  modules: {
    list: {
      routeWatch: 'query',
      data () {
        return {
          list: []
        }
      }
    },
    detail: {
      routeWatch: ['params.id'],
      data ({ params }) {
        // params.routeWatch 是route规则在调用fetch方法时,传入的一个参数,所以在非route规则调用时可能是undefined
        // true 则是路由发生了变化
        // false 路由没有发生变化,比如是从详情返回到列表
        // 可以根据这个特性实现上拉加载
        return {
          id: null,
          title: null,
          content: null
        }
      }
    }
  }
})

  • Vuet.rule(name: String, rule: Object)
    • 描述: 自定义更新规则。
    • 返回值: this
import Vuet from 'vuet'

Vuet.rule('myRule', {
  install (Vue, Vuet) {
    // 传入一个Vue和Vuet,比如你可以给Vuet.prototype.xxx 添加方法
  },
  init (vuet) {
    // 接收到当前的vuet实例,你可以在这里初始化程序的一些自定义配置,例如:
    // vuet.__myRule__ = xxx
  },
  destroy (vuet) {
    // 销毁vuet实例调用的钩子
  },
  rule ({ path }) { // 定义数据的更新规则
    // path是当前处理的模块路径
    // 需要返回一个Object对象,将会插入到Vue mixins中
    return {
      beforeCreate () {
        const vuet = this.$vuet // 取得在Vue实例上挂载的Vuet实例
        vuet.fetch(path) // 调用vuet的fetch方法来更新数据
      }
    }
  }
})

  • 全局指令:
  • v-vuet-scroll:
    • 描述: Vuet模块系统和Vue深度集成的滚动条双向绑定,可以轻易实现各种复杂的滚动条管理,会在Vuet的模块中隐式的创建$scroll对象存储滚动位置,另外route规则在页面切换时,会重置模块的滚动条状态,
    • 修饰符
    • window 绑定到window滚动条上
<div v-vuet-scroll.window="{ path: '....' }"></div>
  • self 绑定到元素自身的内部滚动条,默认绑定元素内部滚动条
 <div v-vuet-scroll.self="{ path: '...', name: '...' }"></div>
  • 参数
    • path Vuet的模块路径,必传参数
    • name 绑定self时,为必传参数
    • self 绑定元素内部的滚动条位置 window 绑定window滚动条的位置
<div v-vuet-scroll.window.self="{ path: '...', name: '...', self: { x: 0, y: 0 }, window: { x: 0, y: 0 } }"></div>

  • 基本选项
  • data

    • 类型: Function
    • 返回值: Object
    • 默认值: {}
    • 描述: 所有的模块状态,都会调用data方法, 将返回的对象合并到一起。
  • pathJoin

    • 类型:String
    • 默认值:null
    • 描述: 模块路径以子模块首字母大写生成,可传入 - 或者 / 等做为模块分隔符,比如/: test/children
  • modules

    • 类型: Object
    • 默认值:{}
    • 描述:程序会递归遍历,如果对象Object里面包含了一个data方法,则会被认为是一个模块。
    • 例子:
new Vuet({
  modules: {
    myModule: {
      // ...模块选项
      data () {
        return {
          // ...
        }
      },
      chlidrenModule: {
        // ...模块选项
        data () {
          return {
            // ...
          }
        }
      }
    },
  }
})

  • 模块选项
  • data
  • 类型:Function
  • 返回值:Object
  • 描述:定义一个模块状态的初始值,它和全局选项中data返回值合并到一起。
  • 例子:
const vuet = new Vuet({
  data () {
    return {
      loading: true
    }
  },
  modules: {
    myModule: {
      data () {
        return {
          count: 0
        }
      }
    }
  }
})
vuet.getState('myModule') // { loading:true, count: 0 }
  • fetch
    • 类型: Function
    • 返回值: Promise
    • 描述: 向服务器请求模块的数据
    • 例子:
const vuet = new Vuet({
  modules: {
    myModule: {
      data () {
        return {
          count: 0
        }
      },
      fetch () {
        return Promise.resolve({
          count: 100
        })
      }
    }
  }
})
vuet
  .fetch('myModule')
  .then((store) => {
    console.log(store) // { count: 100 }
  })

  • Vuet实例属性:
  • store
  • 类型: 只读
  • 描述: 所有的模块状态存储在这里

  • beforeHooks

  • 类型:只读
  • 描述:在调用实例的fetch方法之前,会调用里面的钩子

  • afterHooks:

  • 类型:只读
  • 描述:在调用实例的fetch之后,会调用里面的钩子

  • app

  • 类型:只读
  • 描述:Vuet实例挂载到vue的应用程序中的根组件

  • options

  • 类型:只读
  • 描述:Vuet实例初始化时,传入的选项。

  • _options

  • 类型:只读
  • 描述:根据传入的选项,生成全局和模块的选项。

  • vm

  • 类型:只读
  • 描述:Vuet内部的Vue实例

  • name

  • 类型:只读
  • 描述:存储了模块的原始名称,vuet.names['path']类获取,在开发一些插件时尤其有用

  • Vuet组件内注入Vuet实例属性

import Vue from 'vue'
import Vuet from 'vuet'

Vue.use(Vuet)

const vuet = new Vuet({
  // ... base options
})

new Vue({
  // ...
  vuet,
  created () {
    //this.$vuet.xxx
  }
})

  • Vuet实例方法:
  • beforeEach(fn: Function)
  • 返回值:this
  • 参数:
    • fn要执行的方法,必选参
  • 描述:每次组件实例fetch方法调用之前执行钩子
  • 例子:
const vuet = new Vuet({
  // ... 选项
})
vuet.beforeEach(({ path, params, state, route }) => {
  console.log(path) // 当前更新的模块路径
  console.log(params) // 组件实例fetch方法传入的自定义参数
  console.log(state) // 当前更新的模块状态
  console.log(route) // 当前路由信息
})

  • afterEach(fn: Function)
  • 参数:
    • fn要执行的方法,必选参
  • 返回值:this
  • 描述:每次组件实例fetch方法调用之后执行ch钩子。
  • 例子:
const vuet = new Vuet({
  // ... 选项
})
vuet.beforeEach((err, { path, params, state, route }) => {
  console.log(err) // 如果请求失败,会传入错误的信息
  console.log(path) // 当前更新的模块路径
  console.log(params) // 组件实例fetch方法传入的自定义参数
  console.log(state) // 当前更新的模块状态
  console.log(route) // 当前路由信息
})

  • getState(path: String)
  • 参数:
    • path模块的路径,必选参
  • 返回值:Object
  • 描述:获取某个模块的状态值
  • 例子:
const vuet = new Vuet({
  // ... 选项
  modules: {
    myModule: {
      data () {
        return {
          count: 0
        }
      }
    }
  }
})
vuet.getState('myModule') // { count: 0 }
  • setState(path: String, newState: any)
  • 参数:
    • path模块的路径,必须参
    • newState新的状态,必选参
  • 返回值:this
  • 描述:设置某个模块的状态,设置内容必须保证和模块的数据类型一致有效,Object类型比较特殊,会和原来的对象进行浅合并。
  • 例子:
const vuet = new Vuet({
  // ... 选项
  modules: {
    myModule: {
      data () {
        return {
          count: 0,
          text: 'ok'
        }
      }
    }
  }
})
vuet
  .setState('myModule', { count: 100 })
  .getState('myModule') // { count: 100, text: 'ok' }
  • fetch(path: String, params: Object, setStateBtn: true)
  • 参数:
    • path模块的路径,必选参
    • params自定义参数,在beforeEachafterEach钩子中接收到,可选参,默认为{}
    • setStateBtn请求成功后,是否自动设置状态,如果为false, 则会直接返回fatch请求回来的对象,而不是模块的状态,可选参,默认为true
  • 返回值:Promise
  • 描述:向服务器取得数据跟新。

  • data(path: String)

    • 参数:
      • path模块的路径,必选参
    • 描述:取得模块的初始数据
  • mapModules(path: String)

    • 参数:
      • path模块的路径,必选参
    • 描述:取得manual规则更新模块状态的方法
  • destroy()

    • 描述:销毁Vuet, 释放内存
  • Vuet组件注入Vuet实例属性:

import Vue from 'vue'
import Vuet from 'vuet'

Vue.use(Vuet)

const vuet = new Vuet({
  // ... base options
})

new Vue({
  // ...
  vuet,
  created () {
    //this.$vuet.xxx
  }
})

JackDan9 Thinking!

没有更多推荐了,返回首页