Vue support

[loganvolkers]

Jotai seems better than nanostores from our experience using it, but it is recommended by Astro for sharing state across frameworks. I think this is due to nanostores cross-framework support.

We'd like to start using Jotai with other frameworks, and I think we can look at nanostores vue as a baseline for building a vue integration. It feels like out-of-the-box adapters should be a priority for boosting jotai adoption.

[dai-shi]

Sounds interesting! Would you be working on it?
We can host it under https://github.com/jotaijs/ if you prefer.

fyi, https://github.com/wobsoriano/solid-jotai is developed by @wobsoriano.

[wobsoriano]

I forgot about the Vue integration but I started it before - https://github.com/wobsoriano/jotai-vue

I focused on the solid integration

[loganvolkers]

Related to this would be a Pinia integration.

Looks like it's possible using store.$subscribe: https://pinia.vuejs.org/core-concepts/state.html#subscribing-to-the-state

[wobsoriano]

Curious as to how would Pinia integrate with Jotai?

[loganvolkers]

Similar to the integrations with Redux, Xstate, Zustand, TanStack Query, urql or any other state management solution.

This would be useful if you're trying to mix state management solutions (e.g. combine Pinia and Redux, or Pinia and TanStack Query) or are working across frameworks.

(Aside: In my opinion TanStack Query should be built on atoms, instead of its custom state management primitives.)

You would define an atomFromPina that takes in a store, listens to changes, and delegates actions.

// WORK IN PROGRESS - example
function atomFromPina(store){
  // TODO: Probably needs `mapActions`
  const baseAtom = atom(store.state);

  baseAtom.onMount = (setAtom)=>{
      return store.$subscribe((mutation,state)=>setAtom(state),  { detached: true } );
  }
  
  return atom(
     // Listen to changes
     get=>get(baseAtom),
     // Delegates updates to Pinia store
     // TODO: Probably needs `mapActions`
     (get,set,cb)=>cb(store)
   );
}

And then you could use a store, for example:

import { defineStore } from 'pinia'

const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // could also be defined as
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

const pinaAtom = atomFromPina(useCounterStore);
const doublePiniaAtom = atom(get=>get(pinaAtom).count*2);
const incrementPiniaAtom = atom(null,()=>set(pinaAtom, x=>x.increment() ));

[AjaxSolutions]

Jotai seems better than nanostores from our experience

@loganvolkers Could you please briefly describe why Jotai is better than Nano Stores from your experience?

[loganvolkers]

Could you please briefly describe why Jotai is better than Nano Stores from your experience?

• Ecosystem: Jotai has integrations with other state libraries. It's the polyglot store framework that lets you connect redux, zustand, and valtio across a single app.
• Maintainability: Jotai lets you replace a primitive atom with a derived atom, and no downstream atoms need to be updated. This allows for easier refactoring, particularly for library authors. For example, it is easy to replace atom with atomWithStorage without other app changes.
• Adoption: Jotai has more downloads. That momentum means something.

On the flip side, Nanostores wins for their simple imperative API and multi framework support.

[ortonomy]

I'd love to have vue support for Jotai, simply because I'm so familiar with Jotai now, it's a fluent and easy to grok API, the support for things like Immer, Tanstack Query etc is great... so being able to drag it into my Vue projects would be a boon as it's now my go to - no more need for context, redux or anything else so ... bulky.

[dai-shi]

#1811 (comment)