'如何访问 vue 3 中 setup 内的数据属性？

Question

我正在尝试访问 vue 3 中 setup() 内的数据属性，但给了我这个错误

TypeError: Cannot read property '$localStorage' of undefined

data()

  data() {
    return {
      $localStorage: {},

}

设置

  setup() {
   this.$localStorage
}

我如何在 setup() 中访问此属性？

Answer 1

一种解决方案是getCurrentInstance从 vue 导入并在 onMounted 生命周期或消费品中使用它：

import { onMounted, getCurrentInstance } from "vue";

export default {
  data() {
    return {
      key: "test",
    };
  },
  setup() {
    onMounted(() => {
      console.log(getCurrentInstance().data.key);
    });
  },
};

然而，如此处所述，强烈建议不要使用这种用法。

相反，您可以使用 ref 或 React 在 setup 中定义该数据属性，如下所示：

import { ref } from "vue";

export default {
  setup() {
    const $localStorage = ref({});
  },
};

或者

import { reactive } from "vue";

export default {
  setup() {
    const $localStorage = reactive({});
  },
};

如果您的数据和设置功能位于同一组件中，这些解决方案将起作用。

如果您尝试访问子组件，则可以使用ref来完成此任务。更详细的信息ref在这里