Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Readme
Vue 的 mobx 绑定库
npm i -S movx
or
yarn add movx
使用方法
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
的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
的 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
}
},
}
为了减少学习成本,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
})
}
}
因为他们的参数解析都是同一个方法
支持 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)
}
}
<template>
<input v-model="num" />
</template>
<script>
export default {
$mapState: {
num: {
get: 'num',
set: 'setNum'
}
}
}
</script>
mobx-react
的 injectFAQs
Vue 的 mobx 绑定库
The npm package movx receives a total of 1 weekly downloads. As such, movx popularity was classified as not popular.
We found that movx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.