时间戳

首页 > 解决方案 > 本地存储数据未绑定到数据

vue.js - 本地存储数据未绑定到数据

问题描述

我有一个组件，它调用页脚组件。在页脚组件内，我有一个在点击时显示的模式。我希望该模式的标题成为数据变量，并且我想使用本地存储中的数据设置该数据变量。由于某种原因，它没有出现。

我知道数据在本地存储中。有任何想法吗？

export default {
  name: "FooterComponent",
  data: () => {
    return {
      privacy_modal: false,
      privacy_title: '',
      privacy_content: ''
    };
  },
  methods: {
    beforeMount() {
      this.privacy_title = localStorage.getItem("privacy_title");
    }
  }
};

标签： vue.js

解决方案

beforeMount是一个生命周期钩子，而不是一个方法。它必须直接在 options 中定义，而不是在里面methods：

export default {
  name: "FooterComponent",
  data() {
    return {
      privacy_modal: false,
      privacy_title: '',
      privacy_content: ''
    };
  },

  beforeMount() {
    this.privacy_title = localStorage.getItem("privacy_title"); // || "some default value"
  },

  methods: {
    // custom methods
  }
};

此外，不要忘记根据您的应用程序逻辑的要求更新本地存储。

推荐阅读