Comments (10)
<template>
<section class="section">
{{interval$}}
</section>
</template>
<script>
import { interval } from 'rxjs';
import Vue from 'vue';
import Component from 'vue-class-component';
@Component({
subscriptions: () => {
const interval$ = interval(1000);
return {
interval$
}
}
})
export default class App extends Vue {
}
</script>
This should be work with vue-calss-component
from vue-rx.
I want to found this solution.. but i don't find that.
so, i made a decorator binding.
https://github.com/MinuKang/vue-rx-decorators
from vue-rx.
I've found out that in case of TypeScript the following code works:
@Component<ComponentClass>({
subscriptions() {
// this - instance of ComponentClass
return {
// actual subscriptions
}
}
})
export default class ComponentClass extends Vue {
// ...
}
from vue-rx.
I wonder if @MinUKang decorators can be incorporated into Vue-RX
from vue-rx.
@lambda0xff
you need import vue-rx
(but will not use it):
import VueRx from 'vue-rx'
because it covers vue.d.ts, see(vue-rx/types/index.d.ts):
import Vue from 'vue'
import { WatchOptions } from 'vue'
import { Observable } from 'rxjs'
export type Observables = Record<string, Observable<any>>
declare module 'vue/types/options' {
interface ComponentOptions<V extends Vue> {
subscriptions?: Observables | ((this: V) => Observables)
domStreams?: string[]
observableMethods?: string[] | Record<string, string>
}
}
export interface WatchObservable<T> {
newValue: T
oldValue: T
}
declare module "vue/types/vue" {
interface Vue {
$observables: Observables;
$watchAsObservable(expr: string, options?: WatchOptions): Observable<WatchObservable<any>>
$watchAsObservable<T>(fn: (this: this) => T, options?: WatchOptions): Observable<WatchObservable<T>>
$eventToObservable(event: string): Observable<{name: string, msg: any}>
$subscribeTo<T>(
observable: Observable<T>,
next: (t: T) => void,
error?: (e: any) => void,
complete?: () => void): void
$fromDOMEvent(selector: string | null, event: string): Observable<Event>
$createObservableMethod(methodName: string): Observable<any>
}
}
export default function VueRx(V: typeof Vue): void
from vue-rx.
@psyCodelist
I believe you can use $subscribeTo
method (unfortunately I didn't manage subscriptions()
to work properly inside class-based component):
<template>
<div class="encode">
<button v-stream:click="click$">Count</button>
<button @click="clearCounter()">Clear</button>
<h2 v-if="counter">Clicks: {{counter}}</h2>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator";
import {Subject} from "rxjs/Rx";
@Component
export default class Encode extends Vue {
click$ = new Subject();
counter: number = 0;
mounted() {
this.$subscribeTo(
this.click$
.bufferWhen(() => this.click$.debounceTime(500)),
clicksCount => {
this.counter = clicksCount.length;
})
}
clearCounter() {
this.counter = 0;
}
}
</script>
from vue-rx.
Via the @Component
options you can do:
subscriptions() {
return {
thing: this.someObservableFromComponent.pipe(
map(something => {
return doStuffTo(something);
}),
)
};
}
from vue-rx.
Are there any options to use subscriptions with TypeScript?
from vue-rx.
@dmdnkv
I'm using the same pattern in a Nuxt JS with typescript project.
The issue I'm having is that even though it works, the IDE (VS Code) is complaining about subscriptions
"not being assignable".
Did you have the same issue and did you manage to solve it ?
from vue-rx.
@lambda0xff
I use WebStorm from JetBrains and it doesn't complain about subscriptions
, I didn't try it in VSCode
from vue-rx.
Related Issues (20)
- v-stream data is not being updated in componentInstance HOT 2
- Can't use `subscriptions` as an object. HOT 2
- [help wanted] using vue-rx in component package/plugin HOT 3
- vue renderes before observable HOT 1
- $fromDOMEvent 问题
- Vue Composition API and vue-rx HOT 12
- Created hook called multiple times HOT 4
- How do we use this library with vue3 alpha 8? HOT 2
- help me. $watchAsObservable How to execute directly once the page is loaded HOT 1
- Why have a $subscribeTo ? HOT 1
- Typings error for $observables
- How to use vue-rx with vue 3.x ? HOT 2
- using $watchAsObservable, and using throw new Error() watch not work HOT 1
- Is there any support for Vue 3? HOT 1
- Update to Rx.js 7 and adding Typescript? HOT 2
- Cannot resolve dependency in newer npm version HOT 2
- Publish v6.3.0 in npm
- How to init vuerx to vue3 HOT 3
- Remove Vue installation from the readme
- How to solve vue-rx incompatiblity with Vue3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-rx.