zustand-vue 中文文档教程

Question

zustand-vue

基于 zustand 的 Vue 状态管理

一个小型、快速且可扩展的 Bearbones 状态管理解决方案，使用简化的 Flux 原理。拥有基于 hooks 的舒适 API，不是样板文件或固执己见。

官方文档

:::tip

Vue Live Demo

• #### < a href="https://codesandbox.io/s/sleepy-feynman-fwqhoe?file=/src/components/Action2.vue">Vue3
• #### Vue2

Vue 演示源

• #### Vue3
• #### Vue2 :::

第 1 步：安装

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

第 2 步：存储初始化

创建的存储是一个 hook，您可以在其中放入任何内容：基本变量、对象、函数、状态必须不可更改地更新、set 函数合并状态以实现状态更新。

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

第三步：Store绑定组件就完成了！

根据选择器获取您的目标状态，组件将在状态更改时重新渲染。

:::警告 vue3 与 vue2 中的 Store 绑定组件有所不同。 :::

Vue3

获取目标状态：bears

• 方法一：选择setup中的状态

<template>
  <div>store.bears: {{ bears }}</div>
</template>
<script setip>
import useBearStore from "./store";
const bears = useBearStore((state) => state.bears)
</script>

• 方法二：根据useBearStore初始化数据

<template>
  <div>store.bears: {{ bears }}</div>
</template>
<script>
import useBearStore from "./store";
export default {
  data() {
    return {
      bears: useBearStore((state) => state.bears),
    };
  }
};
</script>

更新目标状态：bears

• 方法一：触发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>

• 方法二：根据store初始化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>

• 方法三：根据methods调用函数变化

<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

获取目标状态：bears

: ：：警告 在vue2环境下，由于兼容性问题，不推荐使用selector。推荐使用useBearStore()获取状态 :::

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

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

也可以与 compulated 一起使用

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

更新目标状态：bears

• 方法一：根据 store 触发变化 初始化 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>

• 方法二：变化基于methods调用函数

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

：：：警告 由于zustand-vue遵循flux模型，其状态具有不可变更新的特性，当你绑定Input(Form)组件时，v-model 语法糖将会失效，必须使用set来更新state，如下根据vue2和vue3不同方法的示例：

Vue3

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

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

• 方法1 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>

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

:::