zustand-vue
State management for vue based on zustand
Last updated 3 years ago by awesomedevin .
MIT · Repository · Bugs · Original npm · Tarball · package.json 
$ cnpm install zustand-vue
SYNC missed versions from official npm registry.

zustand-vue

Build Size Version

???? State-management for Vue based on zustand.

A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.

If you have good ideas, Welcome to build together ! ????????????

Official Document Chinese Document

:::tip

Vue Live Demo

Vue Demo Source

:::

Step 1: Install

npm install zustand-vue # or yarn add zustand-vue

Step 2: Store Initialization

The created store is a hook, you can put anything in it: basic variables, objects, functions, state must be updated immutably, set function merges state to achieve state update.

import create from "zustand-vue";

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  setBears: (val)=>set({ bears: value })
  removeAllBears: () => set({ bears: 0 }),
}))

export default useBearStore

Step 3: Store binds the component and it's done!

Get your target state based on the selector and the component will re-render on state change。

:::caution Store binds components are different in vue3 vs vue2。 :::

<summary>Vue3</summary>

Get target state：bears

  • Method 1： Select the state in setup
<template>
  <div>store.bears: {{ bears }}</div>
</template>
<script setup>
import useBearStore from "./store";
const bears = useBearStore((state) => state.bears)
</script>
  • Method 2：Initialize data based on useBearStore
<template>
  <div>store.bears: {{ bears }}</div>
</template>
<script>
import useBearStore from "./store";
export default {
  data() {
    return {
      bears: useBearStore((state) => state.bears),
    };
  }
};
</script>

Update target state：bears

  • Method 1: Triggers changes in setup
<script setup lang="ts">
import useBearStore from "./store";
const increasePopulation = useBearStore((state) => state.increasePopulation);
const removeAllBears = useBearStore((state) => state.removeAllBears);
</script>

<template>
  <button @click="increasePopulation">increasePopulation</button>
  <button @click="removeAllBears">removeAllBears</button>
</template>
  • Method 2: Triggers changes based on store initialize methods
<script>
import useBearStore from "./store";
const increasePopulation = useBearStore((state) => state.increasePopulation);
const removeAllBears = useBearStore((state) => state.removeAllBears);

export default {
  methods: {
    increasePopulation,
    removeAllBears,
  },
};
</script>

<template>
  <button @click="increasePopulation">increasePopulation</button>
  <button @click="removeAllBears">removeAllBears</button>
</template>
  • Method 3: Changes based on methods call function
<script>
import useBearStore from "./store";

const increase = useBearStore((state) => state.increasePopulation);
const remove = useBearStore((state) => state.removeAllBears);

export default {
  methods: {
    increasePopulation() {
      increase();
    },
    removeAllBears() {
      remove();
    },
  },
};
</script>

<template>
  <button @click="increasePopulation">increasePopulation</button>
  <button @click="removeAllBears">removeAllBears</button>
</template>
<summary>Vue2</summary>

Get target state：bears

:::warning In the vue2 environment, due to compatibility issues, selector is not recommended. It is recommended to use useBearStore() to get the state :::

<template>
  <div>store.bears: {{ Store.bears }}</div>
</template>

<script>
import useBearStore from "./store";
export default {
  data() {
    return {
      Store: useBearStore(),
    };
  },
};
</script>

It can also be used with computed

<template>
  <div>store.bears: {{ bears }}</div>
</template>

<script>
import useBearStore from "./store";
export default {
  data() {
    return {
      Store: useBearStore(),
    };
  },
  computed: {
    bears() {
      return this.store.bears;
    },
  },
};
</script>

Update target state：bears

  • Method 1: Triggers changes based on store initialize methods
<script>
import useBearStore from "./store";
const increasePopulation = useBearStore((state) => state.increasePopulation);
const removeAllBears = useBearStore((state) => state.removeAllBears);

export default {
  methods: {
    increasePopulation,
    removeAllBears,
  },
};
</script>

<template>
  <button @click="increasePopulation">increasePopulation</button>
  <button @click="removeAllBears">removeAllBears</button>
</template>
  • Method 2: Changes based on methods call function
<script>
import useBearStore from "./store";

const increase = useBearStore((state) => state.increasePopulation);
const remove = useBearStore((state) => state.removeAllBears);

export default {
  methods: {
    increasePopulation() {
      increase();
    },
    removeAllBears() {
      remove();
    },
  },
};
</script>

<template>
  <button @click="increasePopulation">increasePopulation</button>
  <button @click="removeAllBears">removeAllBears</button>
</template>

:::caution Since zustand-vue follows the flux model, its state has the feature of immutable update, when you bind Input(Form) components, v-model syntactic sugar will be invalid, set must be used to update state, as follows Examples of different methods according to vue2 and vue3：

<summary>Vue3</summary>
  • Method 1
<template>
  <input v-model="bears" @input="handleChange" />
  {/* or <input :bind="bears" @input="handleChange" /> */}
</template>

<script setup>
  import useBearStore from "./store";
  const setBears = useBearStore((state) => state.setBears);
  const handleChange = (e) => { setBears(e.target.value) }
</script>
  • Method 2
<template>
  <input v-model="bears" @input="handleChange" />
  {/* or <input :bind="bears" @input="handleChange" /> */}
</template>
<script>
import useBearStore from "./store";

const setBears = useBearStore((state) => state.setBears);

export default {
  data() {
    return {
      bears: useBearStore((state) => state.bears),
    };
  },
  methods: {
    handleChange(e){
      setBears(e.target.value)
    }
  }
};
</script>
<summary>Vue2</summary>
  • Method1 1
<template>
  <input v-model="bears" />
</template>
<script>
import useBearStore from "./store";

const setBears = useBearStore((state) => state.setBears);

export default {
  data() {
    return {
      store: useBearStore(),
    };
  },
  computed:{
    bears:{
      get(){
        return this.store.bears
      },
      set(val){
        setBears(val)
      }
    }
  }
};
</script>
  • Method 2
<template>
  <input v-model="store.bears" @input="handleChange" />
  {/* or <input :bind="bears" @input="handleChange" /> */}
</template>
<script>
import useBearStore from "./store";

const setBears = useBearStore((state) => state.setBears);

export default {
  data() {
    return {
      store: useBearStore(),
    };
  },
  methods:{
    handleChange(e){
      setBears(e.target.value)
    }
  }
};
</script>
:::

Current Tags

  • 1.0.0-beta.20                                ...           latest (3 years ago)

20 Versions

  • 1.0.0-beta.20                                ...           3 years ago
  • 1.0.0-beta.19                                ...           3 years ago
  • 1.0.0-beta.18                                ...           3 years ago
  • 1.0.0-beta.17                                ...           3 years ago
  • 1.0.0-beta.16                                ...           3 years ago
  • 1.0.0-beta.14                                ...           3 years ago
  • 1.0.0-beta.13                                ...           3 years ago
  • 1.0.0-beta.12                                ...           3 years ago
  • 1.0.0-beta.11                                ...           3 years ago
  • 1.0.0-beta.9                                ...           3 years ago
  • 1.0.0-beta.8                                ...           3 years ago
  • 1.0.0-beta.7                                ...           3 years ago
  • 1.0.0-beta.6                                ...           3 years ago
  • 1.0.0-beta.5                                ...           3 years ago
  • 1.0.0-beta.4                                ...           3 years ago
  • 1.0.0-beta.3                                ...           3 years ago
  • 1.0.0-beta.2                                ...           3 years ago
  • 1.0.0-beta.1                                ...           3 years ago
  • 1.0.0-beta.0                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
awesomedevin
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 19
Dependencies (1)
Dev Dependencies (14)
Dependents (2)

Copyright 2013 - present © cnpmjs.org | Home |