docs: combine nuxt-composition-api and nuxt-typed-vue

[regenrek]

📚 Is your documentation request related to a problem? Please describe.

Hi does nuxt-typed-vuex and nuxt-composition-api work together out of the box.
Do you have any example repo where these two are used together?

Thanks in advance!

[danielroe]

Yes, good idea. I'll add some composables to this package. Any preferences on the way you would like to use it?

[regenrek]

Hi,

yeah, it would be interesting how you would use (memory) state management in combination with for example graphql to read/write data. For example using nuxt-typed-vuex to manage todos state and use nuxt-composition-api composables for crud operations.

Kind of this here (rooms - state) and here (rooms - graphql)

[nimarion]

Any updates?

[danielroe]

With the next release of @nuxtjs/composition-api this will be as simple as creating your own useAccessor function.

import { wrapProperty } from '@nuxtjs/composition-api'
export const useAccessor = wrapProperty('$accessor', false)

// You can now get a fully typed accessor within `setup()`

export default defineComponent({
  setup() {
    const accessor = useAccessor()
    // You can now access a fully typed store accessor in your component
  },
})

[P4sca1]

@danielroe In how far is this different from const { $accessor } = useContext()?
Also I noticed that the state is not reactive in a way. You have to manually wrap each attribute that you want to use in a computed property, e.g.:

const { $accessor } = useContext()
const authenticatedUser = computed(() => $accessor.authenticatedUser )
    
return {
    authenticatedUser
}

Without the computed, resetting authenticatedUser to another value wont update the component.
Is this a limitation of Vue 2 and can this process somehow be simplified, because wrapping everything with a computed is quite verbose.