javascript - '如何在 vue 3 中访问设置内的数据属性？

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);
    });
  },
};

但是，如 here 中所述，强烈建议不要使用这种用法。 .
相反，您可以使用 ref 或响应式在 setup 中定义该数据属性，如下所示:

import { ref } from "vue";

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

或者

import { reactive } from "vue";

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

如果您的数据和设置功能位于同一组件中，这些解决方案将起作用。
如果您尝试访问子组件，可以使用 ref为了完成这个任务。有关 ref 的更多详细信息是 here