Vue3状态更新不生效？组合式API状态管理避坑指南

2024-08-04 15:07:09

Vue3 组合式 API 实现简易状态管理：避坑指南

你是否也曾尝试使用 Vue3 的组合式 API（Composition API）构建轻量级的状态管理方案，却发现状态更新不生效？你并非孤军奋战。许多开发者在初次尝试用 ref 和 reactive 创建全局状态时，都遇到过状态更新后视图未同步更新的难题。本文将深入浅出地解析这一常见问题，并提供切实可行的解决方案，助你轻松构建响应式状态管理机制。

让我们从一个典型的错误示例开始：

store.js

import { ref, reactive } from 'vue';

export const testString = ref('abc');
export const testObject = reactive({ abc: 1, xyz: 2 });

Component.vue

<template>
  <div>
    <p>{{ testString }}</p>
    <button @click="changeString">修改字符串</button>
  </div>
</template>

<script>
import { testString } from './store.js';

export default {
  setup() {
    const changeString = () => {
      testString.value = 'def';
    };

    return {
      testString,
      changeString,
    };
  },
};
</script>

这段代码看似没有任何问题：我们使用 ref 创建了一个响应式字符串 testString，并在组件中引入了它。可是，当你点击按钮试图修改 testString 的值时，会发现视图并没有如期更新。

问题的根源在于，直接导出 ref 或 reactive 创建的响应式数据，会导致在每个引入该数据的组件中，实际上都获得了一个新的副本。 当你修改某个组件中的状态时，只是改变了该组件内部的副本，而其他组件以及原始数据并未受到影响，这就好比每个组件都拥有自己的“平行世界”，无法相互感知。

如何才能破除这些“平行世界”，让所有组件共享同一个状态呢？答案是：将状态封装在一个函数内返回 ，类似于 Pinia 的实现方式：

store.js

import { ref, reactive } from 'vue';

export default function useStore() {
  const testString = ref('abc');
  const testObject = reactive({ abc: 1, xyz: 2 });

  const changeString = () => {
    testString.value = 'def';
  };

  return {
    testString,
    testObject,
    changeString,
  };
}

Component.vue

<template>
  <div>
    <p>{{ store.testString }}</p>
    <button @click="store.changeString">修改字符串</button>
  </div>
</template>

<script>
import useStore from './store.js';

export default {
  setup() {
    const store = useStore();

    return {
      store,
    };
  },
};
</script>