wobsoriano / vue-zustand

🐻 Bear necessities for Vue.

vue-zustand

State-management solution for Vue 3 based on zustand.

Vue 2 users can use this solution.

Install

npm install zustand vue-zustand

Usage

First create a store

Your store is a composable! You can put anything in it: primitives, objects, functions. State has to be updated immutably and the set function merges state to help it.

import create from 'vue-zustand'

interface BearState {
  bears: number
  increase: () => void
}

export const useStore = create<BearState>(set => ({
  bears: 0,
  increase: () => set(state => ({ bears: state.bears + 1 })),
}))

Then bind your components, and that's it!

Use the composable anywhere, no providers are needed.

<script setup>
import { useStore } from './store'

const bears = useStore(state => state.bears)
</script>

<template>
  <h1>{{ bears }} around here ...</h1>
</template>

<script setup>
import { useStore } from './store'

const increase = useStore(state => state.increase)
</script>

<template>
  <button @click="increase">
    one up
  </button>
</template>

Recipes

Fetching everything

const state = useStore()

Selecting multiple state slices

const nuts = useStore(state => state.nuts)
const honey = useStore(state => state.honey)

If you want to construct a single object with multiple state-picks inside, similar to redux's mapStateToProps, you can tell zustand that you want the object to be diffed shallowly by passing the shallow equality function.

import shallow from 'zustand/shallow'

// Object pick, updates either state.bears or state.bulls change
const { bears, bulls } = useStore(
  state => ({ bears: state.bears, bulls: state.bulls }),
  shallow,
)

// Array pick, updates either state.bears or state.bulls change
const [bears, bulls] = useStore(state => [state.bears, state.bulls], shallow)

Nuxt

// plugins/zustand.ts
export default defineNuxtPlugin((nuxtApp) => {
  if (process.server) {
    nuxtApp.hooks.hook('app:rendered', () => {
      const initialState = JSON.parse(JSON.stringify(useStore.getState()))
      nuxtApp.payload.zustand = initialState
    })
  }

  if (process.client) {
    nuxtApp.hooks.hook('app:created', () => {
      useStore.setState({
        ...useStore.getState(),
        ...nuxtApp.payload.zustand,
      })
    })
  }
})

License

MIT

vue-zustand's Issues

Would this library work with vue 2.7.X?

I'm trying to use Zustand to share state management between React/Vue but I'm bound to 2.7. I see that vue3 is used in the deps, would this work with vue 2.7 as well?

Not working with array

Question: Can I use an already created store?

Hi, I am completely new to zustand, and i want to use the same zustand store in both vue2 and react. An update to a variable in react should update the state in vue2, and vice versa.

In the example in the readme, you create and export a new store, but i would like to reuse the existing store which i have created in react.

Is it possible to pass an existing store to create? Or should a new store be created differently?
The only way i see this would be possible, is to watch for any changes in the store and then use useStore.setState to update the whole state, but i don't think this is the correct way to move forward.

I might fork this repo to implement this for our own codebase, but i thought i would ask first as I'm not that experienced with zustand. Which changes would have to be made to the codebase to use and sync the store between react and vue2?

Versions 0.3.x don't have index.d.ts

Problem with exports

Hi! I've noticed that the exports part in the package.json is different than the files generated on build.

This is the package.json:

  "exports": {
    "require": "./dist/index.js",
    "import": "./dist/index.mjs"
  },

But the files generated are .js and .cjs. Reading the documentation on tsup (the tool used on the build-fast script) it states that that happens if the type is set to module on package.json https://tsup.egoist.sh/#bundle-formats

Maybe it's better to change the type of the package? Or change the filenames on the exports on the package.json?

Thanks for your hard work!