[RFC] mobx-vue v3 about mobx-vue HOT 18 CLOSED

Please don't deprecate vue-class-component support. It's the only reason I use mobx-vue. If you want to support composition API in addition to classes that would be fine. You could release the composition support now and do another release later when vue-class-component finalizes v3 support.

from mobx-vue.

I'm currently using MobX 6 with Vue 3. Here is the plugin I wrote (it's actually Quasar boot file):
Works like a charm. Hope this helps.

import { ComponentPublicInstance } from '@vue/runtime-core'
import { Reaction } from 'mobx'
import { boot } from 'quasar/wrappers'

const reactionKey = '__mobx_reaction__'

interface MobxComponent extends ComponentPublicInstance {
  [reactionKey]: Reaction
}

function getComponentName(vm: ComponentPublicInstance) {
  // @ts-ignore
  return (vm.$options.name || vm.tag || '<observed-component>') as string
}

export default boot(({ app }) => {
  app.mixin({
    created(this: MobxComponent) {
      const name = getComponentName(this)
      const reaction = new Reaction(`${name}::mobx-reaction`, () => {
        if (this.$.isMounted) {
          this.$forceUpdate()
        }
      })

      this[reactionKey] = reaction
      // @ts-ignore
      const originalRender = this.$.render

      // @ts-ignore
      this.$.render = function(...args: any) {
        let renderResult: unknown

        reaction.track(() => {
          renderResult = originalRender.call(this, ...args)
        })

        return renderResult
      }
    },
    beforeUnmount(this: MobxComponent) {
      this[reactionKey].dispose()
    },
  })
})

from mobx-vue.

vote for idea 2, but don't need to support decorator any more.

from mobx-vue.

I would really like to use mobx-vue & vue-class-component with vue3. The code is very clear and understandable for non-js programmers in the team.

from mobx-vue.

vue3.0 不需要mobx，vue自带的reactivity可以完全替代掉mobx。

// store
export class BaseStore {
  constructor() {
    return reactive(this);
  }
}

// module like 
class UserStore extends BaseStore {
  name = ''
}

export const user = new UserStore()

// index
export class StoreCenter extends BaseStore {
  token = ''
  user = user
}

export const store = new StoreCenter();

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: StoreCenter
  }
}

export default {
  install: (app: App) => {
    app.config.globalProperties.$store = store
  }
}

在component中用computed来引入store的数据就可以了。

from mobx-vue.

vote for idea 2, but don't need to support decorator any more.

yes,idea 2 is good,and there some different idea,

<script>
  import { observer } from 'mobx-vue';
  export default observer({
      setup() {
        // balabala
      }
  });
</script>

<!-- use <script setup> -->
<script setup>
  import { observer } from 'mobx-vue';

export const state= observer({
 // balabala
})
//or
export default observer({
 // balabala
})
</script>

from mobx-vue.

import { createApp } from 'vue';
import store from './store';
import App from './App.vue';
createApp(App)
.use(store)
.mount('#app');


<!-- use <script > -->
 import { observer,inject } from 'mobx-vue'; 
 @Inject('store') 
 @observer
 export default defineComponent({
})
//or
export default observer({
   setup(props) {
      console.log(props) // {store:{}}
    }
 })

from mobx-vue.

@steven-sheehy Wow, I really don't know vue-class-component support is so important for you. I get your feedback and rethink vue-class-component support.

from mobx-vue.

我真的很想将mobx-vue&vue-class-component与 vue3一起使用。代码对于团队中的非js程序员来说非常清晰易懂。

但是我感觉吧，vue3的类hook特性，使得store层变得不是特别刚需

from mobx-vue.

I vote for:

• Idea 2 - without the @ decorator - so support something similar to match the React approach.
• Idea 3 - as need 1st class Vue.js SFC support as well.

from mobx-vue.

Also some food for thought of how mobx-jsx handels this:

• Counter Using Functions
• Counter Using Classes

from mobx-vue.

别启用 类语法和装饰器吧。类语言可以很好地封装继承，装饰器是未来趋势，而且很好用

from mobx-vue.

我真的很想将mobx-vue&vue-class-component与 vue3一起使用。代码对于团队中的非js程序员来说非常清晰易懂。

但是我感觉吧，vue3的类hook特性，使得store层变得不是特别刚需

我觉得也是。class 语法对于后端开发人员真的非常友好，我就是一个写过C# ,Java 后面转型js 的在搭建工程时会用后端开发模式把React,Vue设计成后端工程结构，后面后端开发人员都不需要懂React,Vue这些都能很好修改代码，专注业务

from mobx-vue.

Hey just released a really simple mobx-react-lite inspired library for Vue 3

https://github.com/wobsoriano/mobx-vue-lite

• useLocalObservable
• <Observer></Observer>
• createGlobalObservable

from mobx-vue.

@wobsoriano Are you interested in mobx-vue v3 design ? or do you want transfer your mobx-vue-lite to mobxjs org ? It looks like good (mobx-vue-lite), but no test case ci, so we can do it better. what's your opinion ?

from mobx-vue.

@wobsoriano Are you interested in mobx-vue v3 design ? or do you want transfer your mobx-vue-lite to mobxjs org ? It looks like good (mobx-vue-lite), but no test case ci, so we can do it better. what's your opinion ?

I'm fine moving it to mobxjs org

from mobx-vue.

有一个很神奇的现象。就是在v3里面的 mobx 类
外面套一个 reactive 或者直接在 vue组件内 new 的话，这个mobx是正常工作的。

@Options({
  components: {},
})
export default class Home extends Vue {
  System=new SystemController();
}
//或者
config.globalProperties.System = reactive(new SystemController())

仓库地址：https://github.com/LengYXin/mamba/tree/dev/packages/micro

https://github.com/LengYXin/mamba/blob/dev/packages/micro/src/components/user.vue
还用微前端方式传递到React 夸框架也正常使用。

from mobx-vue.

closed via mobxjs/mobx-vue-lite#1

from mobx-vue.