awesomedevin / zustand-vue

🐻 State management for vue (Vue3 / Vue2) based on zustand

zustand-vue

🐻 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 中文文档

:::tip

Vue Live Demo

• Vue3

• Vue2

Vue Demo Source

• Vue3

• Vue2

:::

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。 :::

Vue3

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>

Vue2

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：

Vue3

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

Vue2

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

:::

State-Sharing

if you want cross-application and cross-framework(react/vue) state management and sharing capabilities, maybe you can try zustand-pub.

Stargazers

Forkers

zustand-vue's Issues

data-overflow in Mobile-view

The description of ZUSTAND on the main page overflows in the mobile view

Another suggestion is to try to sync the animation of the button on the main page so they may sync with each other and look attractive

[DEPRECATED] Default export is deprecated. Instead use import { createStore } from 'zustand/vanilla'.

调用create会有废弃警告

Difference between vue-zustand?

Any difference between this package and vue-zustand? Planning to use it in a project.

在vue中主应用对象更新，无法数据绑定

platformStore.ts

主应用代码

子应用代码

现象：

当主应用点击setAppName按钮时，主应用的appInfo没有更新，子应用的更新了
测试过如果在子应用中setAppName，依旧是子应用更新，而主应用没有更新，再次点击increment触发setValue则会更新value和appInfo
如果将const appInfo = usePlatformStore((state) => state.appInfo);修改为const appInfoName = usePlatformStore((state) => state.appInfo.name);则有效
使用的微前端：wujie， 主应用vue3，子应用vue3

Using vue 2.7, what about computed? (composition api script setup)

Hello, I'm using Vue 2.7, and I cannot get it to work with computed properties; the state is never updated.

How can I solve this issue?

const bears = useBearStore((state) => state.bears)
const increasePopulation = useBearStore((state) => state.increasePopulation)
const { value: bearsReactive } = computed(() =>
  useBearStore((state) => state.bears)
)

Issue Title