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

movx

v1.0.2

Published

Vue 的 mobx 绑定库

Downloads

10

Readme

movx

Vue 的 mobx 绑定库

Installation

npm i -S movx

or

yarn add movx

Requirement

  • Vue >= 2.0.0
  • MobX >= 4.0.0, 兼容 MobX 5!

Why movx

issue #1

Usage

使用方法

初始化插件

import Vue from 'vue'
import Movx from 'movx'
import store from './store'

// 方式一,通过 Vue 根实例的 store 属性传 store 对象
Vue.use(Movx)

new Vue({
  store
  /* 根实例开始就可以使用 this.$store 访问store对象 */
})

// 方式二,通过插件初始化定义全局 store 状态
Vue.use(Mobx, store)

new Vue({
  /* 根实例开始就可以使用 this.$store 访问store对象 */
})

// 方式三:多 store, 在子组件指定store 属性,使该子组件的后代组件都有单独的store
Vue.use(Movx)
new Vue({
  components: {
    {
      store: storeX
    },
    {
      store: storeY
    },
  }
})

状态绑定

状态绑定围绕 $mapState$mapAction 展开

假设有这么一个 store

// store.js
import { observable, computed, action } from 'mobx
class Counter {
  @observable num = 0
  @computed get numPlus() {
    return this.num + 1
  }
  @action setNum(value) {
    this.num = value
  }
  @action plus() {
    this.setNum(this.num + 1)
  }
  @action reset() {
    this.setNum(0)
  }
}

export default new Counter()

$mapState

$mapState 的api含义和 vuex 的 mapState 大致相同,底层最终会把参数解析好放到 vue 组件的 computed

使用字符串数组,元素是 store 中变量的路径,路径使用点. 或者斜线/ 分隔,也可以混合,最终的绑定的变量名称是路径的最后部分,这是最方便的一种

export default {
  store: { // 注意有多层嵌套
    a: {
      b: {
        c: store
      }
    }
  },
  $mapState: [
    'a.b.c.num',
    'a/b.c/numPlus',
  ],
  template: `<p>{{num}}|{{numPlus}}</p>`
}

使用对象形式更灵活

export default {
  store: store, // 注意这里没有嵌套深层
  data() {
    return { foo: 10 }
  }
  $mapState: {
    num: 'num', // 路径字符串
    anum: 'num', // 相当于起别名, 
    bnum: store => store.num, // 使用 函数,store 参数就是 this.$store 对象
    cnum: {
      get: 'num',
      set: (val, store) => store.setNum(val) // 第一个参数是更改的值,第二个参数是 store
    },
    dnum: {
      get: store => store.num,
      set: 'setNum'
    },
    enum: {
      get: 'num',
      set: 'setNum'
    },
    fnum: {
      get: store => store.num,
      set: (val, store) => store.setNum(val)
    },
    gnum(store) {
      return this.foo + store.num 
    },
    hnum: {
      // 这里get 和 set 的 this 是组件实例
      get(store) {
        return this.foo + store.num
      },
      set(val, store) {
        return store.setNum(val + this.foo)
      }
    }
  },
  mounted() {
    console.log(
      this.num,
      this.anum,
      this.bnum,
      this.cnum,
      this.enum,
      this.fnum,
      this.gnum,
      this.hnum,
    )

    this.cnum = 5
    this.dnum = 6
    this.enum = 7
    this.fnum = 8
    this.gnum = 9
    this.hnum = 10
  }
}

$mapAction

$mapAction 的 api 函数和 vuex 的 mapAction 类似,底层最终会把参数解析好,并且把函数的上下文放到vue组件的 methods

使用字符串数组,元素是 store 中变量的路径,路径使用点. 或者斜线/ 分隔,也可以混合使用,最终的绑定的变量名称是路径的最后部分,并且智能的给函数绑定好了指定层级的 store 对象的上下文

export default {
  store: { // 有深层嵌套
    a: {
      b: {
        c: store,
      }
    }
  },
  $mapState: ['num']
  $mapAction: ['a/b.c.setNum'],
  mounted() {
    this.setNum(5) // 这里的 setNum 函数执行的 this 指向的是 store 中的 counter 对象
  }
}

也可以使用对象更灵活的配置

export default {
  store: store,
  $mapAction: {
    setNum: 'setNum',
    xsetNum: 'setNum',
    ysetNum: store => store.setNum,
    zsetNum(store) {
      return store.setNum.bind(this) // 也可以手动绑定this
    }

  },
}

兼容 vuex 的 mapState 和 mapAction

为了减少学习成本,mapState 和 mapAction 都可以兼容 vuex 的用法

import { mapState, mapAction } from 'movx'

export default {
  store: store,
  computed: {
    ...mapState(['num', 'numPlus']),
    ...mapState({
      xnum: 'num',
      ynum(store) {
        return store.num
      }
    })
  },
  methods: {
    ...mapAction(['setNum']),
    ...mapAction({
      plus: 'plus',
      reset: store => store.reset
    })
  }
}
  • mapState 的参数和 $mapState 完全一样
  • mapAction 的参数和 $mapAction 完全一样

因为他们的参数解析都是同一个方法

Mixin

支持 mixin,虽然用的人不多,但是也兼容了,mixin 中重复字段不会覆盖,而是会叠加

const mixin1 = {
  $mapState: ['num']
}
const mixin2 = {
  $mapState: ['numPlus']
}

export default {
  mixins: [mixin1, mixin2],
  $mapState: {
    xnum(store) {
      return this.num + this.numPlus
    }
  },
  mounted() {
    console.log(this.num, this.numPlus, this.xnum)
  }
}

一些例子

v-model 配合

<template>
  <input v-model="num" />
</template>
<script>
export default {
  $mapState: {
    num: {
      get: 'num',
      set: 'setNum'
    }
  }
}
</script>

TODO

  • [] namespace 减少路径重复
  • [] inject 方法支持state 和 action 写到一起,类似 mobx-react 的 inject