https://github.com/wobsoriano/vue-zustand

🐻 Bear necessities for Vue.
https://github.com/wobsoriano/vue-zustand

state-management vue zustand

Last synced: 3 months ago
JSON representation

🐻 Bear necessities for Vue.

• Host: GitHub
• URL: https://github.com/wobsoriano/vue-zustand
• Owner: wobsoriano
• License: mit
• Created: 2021-08-11T15:55:42.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-19T17:07:45.000Z (over 1 year ago)
• Last Synced: 2024-05-01T16:36:51.938Z (8 months ago)
• Topics: state-management, vue, zustand
• Language: TypeScript
• Homepage:
• Size: 183 KB
• Stars: 51
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# vue-zustand

State-management solution for Vue 3 based on [zustand](https://github.com/pmndrs/zustand).

Vue 2 users can use [this solution](https://gist.github.com/Zikoat/ec47ff3646f889d09f8c6d350e6060f6).

## Install

```sh

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](https://github.com/pmndrs/zustand/blob/main/docs/guides/immutable-state-and-merging.md) to help it.

```ts

import create from 'vue-zustand'

interface BearState {

  bears: number

  increase: () => void

}

export const useStore = create(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.

```vue

import { useStore } from './store'

const bears = useStore(state => state.bears)

  
{{ bears }} around here ...


```

```vue

import { useStore } from './store'

const increase = useStore(state => state.increase)

  

    one up

  

```

## Recipes

### Fetching everything

```ts

const state = useStore()

```

## Selecting multiple state slices

```ts

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.

```ts

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

```ts

// 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