Vue, App与我（六）

最新推荐文章于 2024-07-23 17:22:52 发布

前端Baymax

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量647

点赞数 2

分类专栏：趣味前端文章标签： app vue-js

本文链接：https://blog.csdn.net/XXJ19950917/article/details/76176940

版权

趣味前端专栏收录该内容

61 篇文章 2 订阅

订阅专栏

Vue, App与我（六）

Big-man 今天需要义正言辞地扯一下配置文件, 为什么了？
因为Big-man遇到了一个新的问题，需要引入Express.js，Express.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内置了route，once，need，life这几种常见的数据更新规则
- 返回值: 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自定义参数，在beforeEach和afterEach钩子中接收到，可选参，默认为{}
- 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!

前端Baymax

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue, App与我（六）

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

扫一扫

专栏目录