Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如果有多个Store,该如何使用呢? #5

Closed
yee94 opened this issue Jun 8, 2018 · 1 comment
Closed

如果有多个Store,该如何使用呢? #5

yee94 opened this issue Jun 8, 2018 · 1 comment

Comments

@yee94
Copy link

yee94 commented Jun 8, 2018

<template>
    <section>
        <p v-text="age"></p>
        <p v-text="computedAge"></p>
        <p v-for="user in users" :key="user.name">{{user.name}}</p>
        <button @click="setAge"></button>
    </section>
</template>

<script lang="ts">
    import { Connect } from "mobx-vue";
    import Vue from "vue";
    import Component from "vue-class-component";
    import ViewModel from './ViewModel';

    @Connect(new ViewModel())
    @Component()
    export default class App extends Vue {
        mounted() { 
            this.fetchUsers();
        }
    }
</script>

这是目前官方给的例子,想问下如果有多个Mobx 的store,该如何使用呢?我这样的使用可以被支持吗?

<template>
    <section>
        <p v-text="age"></p>
        <p v-text="computedAge"></p>
        <p v-for="user in users" :key="user.name">{{user.name}}</p>
        <button @click="setAge"></button>
       <p>{{ViewModel.user}}</p>
    </section>
</template>

<script lang="ts">
    import { Connect } from "mobx-vue";
    import Vue from "vue";
    import Component from "vue-class-component";
    import ViewModel from './ViewModel';
    import ViewModel2 from './ViewModel2';

    @Connect()
    @Component()
    export default class App extends Vue {
        mounted() { 
            this.fetchUsers();
        }
       computed:{
            user(){
               return ViewModel.user
           },
           user2(){
                return ViewModel2.user
          }
      }
    }
</script>
@kuitos
Copy link
Member

kuitos commented Jun 8, 2018

v2.0.0 released! which use Observer decorator instead of Connect, just like mobx-react does.
Now you can define your component like this:

import { Observer } from 'mobx-vue'

@Observer
@Component()
export default class App extends Vue {
    store1 = store1;
    store2 = store2;
    mounted() { 
        this.store1.fetchUsers();
    }
}

Or u can check the doc for more information: https://github.com/mobxjs/mobx-vue

@kuitos kuitos closed this as completed Jun 8, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants