npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mycolorway/vest-pocket

v0.2.6

Published

Some missing modules for wechat miniprogram development.

Downloads

6

Readme

vest-pocket

vest-pocket 是对小程序官方框架的补充,提供了官方框架缺少的一些实用 module。

微信接口封装

wx-api module 对微信小程序的接口做了封装,让异步接口返回 Promise,配合 vest 的 async/await 的语法支持,可以大大简化调用 API 的代码,例如:

import { wx } from '@mycolorway/vest-pocket'

Page({
  async onLoad() {
    this.setData(await wx.request({
      url: 'xxx'
    }))
  }
})

响应式开发

vest-pocket 引入了跟 Vue 类似的响应式开发 module,可以实现对某个对象或者对象的某个属性进行监控。具体使用方法可以参考单元测试

另外,vest-pocket 还对官方默认的 Component/Behavior 构造器进行了封装,让自定义组件能够支持跟 Vue 一样的 computed 和 watch 定义段,例如:

// pages/index/multiply-behavior.js
import { Behavior } from '@mycolorway/vest-pocket'

export default Behavior({
  computed: {
    multiply() {
      return this.data.a * this.data.b * this.data.c
    }
  },

  lifetimes: {
    attached() {
      console.log(this.data.multiply)
    }
  }
})
// pages/index/index.js
import multiplyBehavior from './multiply-behavior'
import { Component } from '@mycolorway/vest-pocket'

Component({

  behaviors: [multiplyBehavior],

  data: {
    a: 1,
    b: 2,
    c: 3
  },

  computed: {
    sum() {
      return this.data.a + this.data.b + this.data.c
    }
  },

  watch: {
    c(newVal, oldValue) {
      console.log(`c changed from ${oldValue} to ${newVal}`)
    },
    b: '_bChanged'
  },

  lifetimes: {
    attached() {
      console.log(this.data.sum) // output: 6
      this.setData({ b: 4, c: 5 })
      console.log(this.data.sum) // output: 10
    }
  },

  methods: {
    _bChanged(newVal, oldValue) {
      console.log(`b changed from ${oldValue} to ${newVal}`)
    }
  }
})

Store

在一些业务比较复杂的 Web 项目里,我们通常会借助 Vuex 或者 Redux 来实现应用的状态管理。vest-pocket 的 Store 填补了小程序在这方面的空白。

vest-pocket Store 的设计借鉴了 Vuex,大部分接口都跟 Vuex.Store 保持一致:

// store/index.js
import { Store } from '@mycolorway/vest-pocket'

export default new Store({
  state: {
    name: ''
  },

  mutations: {
    updateName(state, name) {
      state.name = name
    }
  },

  actions: {
    async loadName({commit}) {
      commit('updateName', await requestName())
    }
  },

  modules: {
    child: {
      state: {
        firstName: 'vest',
        lastName: ''
      },
      getters: {
        name(state) {
          return `${state.firstName}-${state.lastName}`
        }
      },
      mutations: {
        updateLastName(state, lastName) {
          state.lastName = lastName
        }
      },
      actions: {
        async loadLastName({commit}) {
          commit('updateLastName', await requestLastName())
        }
      }
    }
  }
})

Map Helpers

为了方便页面开发,跟 Vuex 一样,vest-pocket 也提供了类似的 helper 方法,可以把 store 的 state properties、getters、mutations 和 actions 映射到自定义组件里。

借助 vest-pocket 对自定义组件对封装,我们就可以把应用状态跟自定义组件绑定在一起:

// pages/index/index.js
import store from './store'
import { Component } from '@mycolorway/vest-pocket'
import { mapActions, mapMutations, mapGetters, mapState } from '@mycolorway/vest-pocket/store'

Component({

  store,

  computed: {
    ...mapState(['name']),

    ...mapGetters('child', {
      childName: 'name'
    })
  },

  methods: {
    ...mapMutations(['updateName']),

    ...mapMutations('child', ['updateLastName']),

    ...mapActions(['loadName']),

    ...mapActions('child', {
      loadChildLastName: 'loadLastName'
    }),

    onLoad() {
      console.log('from page')
      this.updateName('lalala')
      this.loadChildLastName()
    }
  }
})

另外,为了避免在每个页面里都重复的去绑定 store,我们可以在 app.js 里面统一绑定:

// app.js
import store from './store/index'

App({
  store
})

这样 Component module 会自动将 getApp().store 绑定到每一个自定义组件上。