🐻 Bear necessities for Vue.
npm install vue-zustandState-management solution for Vue based on zustand.
``sh`
npm install zustand vue-zustand
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.
`ts
import create from 'vue-zustand'
interface BearState {
bears: number
increase: () => void
}
export const useStore = create
bears: 0,
increase: () => set(state => ({ bears: state.bears + 1 })),
}))
`
Use the composable anywhere, no providers are needed.
`vue
{{ bears }} around here ...
`
`vue
`
`ts`
const state = useStore()
`ts`
const nuts = useStore(state => state.nuts)
const honey = useStore(state => state.honey)
You can also construct a single object with multiple state-picks inside, similar to redux's mapStateToProps:
`ts
// Object pick, updates either state.bears or state.bulls change
const { bears, bulls } = useStore(state => ({ bears: state.bears, bulls: state.bulls }))
// Array pick, updates either state.bears or state.bulls change
const [bears, bulls] = useStore(state => [state.bears, state.bulls])
`
To support SSR, follow these Nuxt plugin instructions:
`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,
})
})
}
})
``
MIT