Is it possible to use this in a simpler and centralized state way?

[thelinuxlich]

something like this:

import React from 'react'
import state from './state/root' // module exporting a reactive() object

const Component = () => {
   return <div>{state.foo}</div>
}
export default Component

[sibbng]

Not quite possible. We have to bind reactivue instance to your React component for running lifecycle hooks and triggering rerender on data changes. There are few ways to do it in react. Hooks and High Order Components are some of those. Maybe defineComponent function could help.

Example:

import React from 'react'
import { defineComponent } from 'reactivue'
import state from './state/root' // module exporting a reactive() object

const Component = defineComponent(
  () => ({ state }),
  ({ state }) => {
    return <div>{state.foo}</div>
  }
)

export default Component

Checkout @antfu's https://github.com/antfu/awesome-cn-cafe-web project. It has great examples.

[thelinuxlich]

Maybe a helper wrapping for this use case?

import React from 'react'
import { defineSimpleComponent } from 'reactivue'
import state from './state/root' // module exporting a reactive() object

const Component = defineSimpleComponent(state,
  () => {
    return <div>{state.foo}</div>
  }
)

export default Component