gent-vue
A
Vue plugin
to use with gent-store and rxjs。
安装
npm i gent-vue gent-store -S
;
绑定插件
;; Vue;
store
。
定义
store
在根组件绑定在根组件上绑定后,每个组件中会有异性几个属性, 这些属性的名字都可以在使用插件的时候自定义。
-
vm.$store
: Store实例。 -
vm.$state
: 响应式的state,关联到store.state
. -
vm.$subs
: 用来绑定订阅,组件内新建订阅的时候最好绑定在这上面,组件离开时会取消这些订阅.(例:
vm.$subs.addUser = Observable.of(1).subscribe(item => {})
)。 -
vm.$unsubscribe(key)
: 取消一个绑定在vm.$subs
上的订阅,不传key则取消所有订阅。
; store { // } computed: { return this$sotrestateuser; }
使用
获取数据: 一般直接从
vm.$state
获取,或者通过计算属性获取。
computed: { return this$storestateuser; } { console };
数据变换: 每一次数据变换开始一个数据流。
; methods: { // 放弃上次订阅,如果有 this; let user = id: Date name: 'user-' + Math ; // 定义流 let observable = ofuser; // 服务器请求 observable = observable; // 提交store变更 observable = observable // 订阅,开始一个数据流 NProgressstart; this$subsaddItem = observable; } ;
注意
- 不能直接更改state,所有store的更改应该通过
store.commit
操作。 - 如果要把store的一些值初始化为data,可以用
store.copy
。
{ const store = this$store; return user: store }