Comments (8)
I'm kinda wondering what direction this project might take with a "new vue" on the horizon. Since vue seems to move away from classes and therefore decorators is there a happy path to using mobx with vue in 2020?
from mobx-vue.
@xrado good question! Actually that is what made me in a dilemma.
I think one component should bind with one ViewModel, and the ViewModel could composed by multiple store and itself local states IMO, which mmlpx dose and that matching the standard MVVM philosophy.
But now I realized that I should not export any values of my own to users, be unopinioned is the basic principle of mobx and mobx-vue.
@nighca @xrado I will realize a version with observer
and custom initialization these days. like:
@Observer
@Component()
export default class App extends Vue {
store = store
vm = new ViewModel()
}
and using in template:
<div>{{store.user}} {{vm.loading}}</div>
Thanks for your feedback!
from mobx-vue.
It's so great that met someone thought the same!
- Usually we use store in a singleton way, which means they are global and that is what redux and vuex does actually. So I think maybe you need a workaround to solve the shared-state problem(also needs in redux and vuex scenario):
@Connect(store)
@Component()
export default class App extends Vue {
mounted() {
this.initStore()
}
destroyed() {
this.destroyStore()
}
}
That is not my favour too so maybe I should support initializing the state automatically.
class ViewModel() {}
@Connect(ViewModel)
@Component()
export default class App extends Vue {}
But the risk of this workaround is that Store and ViewModel are different conceptually, the former lives singleton and the later lives around the component lifecycle, but they are defined the same way(class recipe). For a bindings/connector we shouldn't introduce too much extra concepts imo.
Or you can try the special solution with DI which mmlpx provided, you can take a glance althought it not documented well yet๐.
-
Yes
observer
is more semantical thanconnect
in a reactive system. But what I concern is, since we have take over thedata
andmethods
definition with a mobx model, why we need to define a extra field to be the member of component instance? which is against the experience of vue users.Mobx model should be equivalent to the component instance/vm conceptually, that means we can access the model directly instead of through a vm member.
Definitely,
observer
is more semantical for a reactive system, I need to think it over.
from mobx-vue.
What about connecting multiple stores?
from mobx-vue.
Released v2.0.0! @nighca @xrado
from mobx-vue.
@kuitos ๐ Very impressive productivity.
To me, it is reasonable to provide another API like @Connect(ViewModel)
and do class instantiation automatically. As it is more relevant to DI thing, maybe such an API and DI solution for Vue-Mobx can be provided together.
from mobx-vue.
@nighca Automatic instantiation will introduce several new issues which should not simply construct the ViewModel with new
, also applies to di system. Look such a scenario:
class ViewModel {
id: number;
@observable users = [];
constructor(id: number) {
this.id = id;
}
async onInit() {
this.users = await http.get(`/users/${this.id}`)
}
}
We need provide the ability to pass parameters to constructor, maybe it looks like this:
Connect(ViewModel, 10)
And things are moving forward. The parameter cames from vue instance, such as a router query string. We need support another usage:
Connect(ViewModel, vm => [vm.$route.query.userId])
In fact that are what mmlpx provided already!๐.
With mmlpx you can initialize states like this:
import { inject } from 'mmlpx';
class App extends Vue {
@inject()
vm1: ViewModel;
@inject(ViewModel)
vm2;
@inject(ViewModel, 10)
vm3;
@inject(ViewModel, vm => [vm.$routes.userId])
vm4;
}
DI should be an independent solution for who don't wanna initilize dependencies manually, and applies to any other framework imo. But Connect
also required to me, maybe I should provide a more convenient instantiation way for mobx-vue by mmlpx-vue, and documented as best practice๐.
from mobx-vue.
@kuitos Yes, what I mean is just what mmlpx does.
But I'm not sure if mmlpx already suits Vue context well. Maybe there is some more work needed, and if so, it is fine to provide these things within mobx-vue (instead of some other package like mmlpx-vue), just like that mobx-react provides Provider/inject
. Connect
is just another high level function based on Observer
.
from mobx-vue.
Related Issues (20)
- Lost all of types in <vue-template> when component options wrapped by observer
- Please publish a new version to include some fixes. HOT 1
- mobx cause [Vue warn]: Unknown custom element: <router-link>
- I got error when I use @Observer before @Component with Nuxtjs HOT 4
- mobx-vue does not forward static properties when using vue-class-component HOT 1
- Add Documentation re Optimizing Rendering
- No re-renders when observed state is used in some parts of the template HOT 4
- What's the counterpart of `Vue.nextTick` for mobx-vue?
- Can I use mobx-vue without decorated class properties?
- `observer.js` missing from current dist/package HOT 2
- Module Browser Build
- Vue 3 Compatibility HOT 6
- Exception when using with mobx-state-tree HOT 5
- mobx6 HOT 3
- TypeError: reaction.getDisposer is not a function HOT 6
- [RFC] mobx-vue v3 HOT 18
- mobx-vueๆฏๆฏๆvue3.0็ๅ๏ผ HOT 2
- Mobx6 not working HOT 8
- Mobx 6 got `Exception: TypeError: Cannot read properties of undefined` on COLLECTION HOT 3
- Is there a way to add mobx to vue plugin component inside Vue.component, Vue.extend install function? HOT 1
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 mobx-vue.