Javascript 如何解决；属性或方法未在实例上定义，但在呈现期间被引用&引用；在Vue.js中？

我试图从前端请求通知，但我收到了此错误

属性或方法“requestPermission”未在实例上定义，但在呈现期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的

在代码中，方法

requestPermission

拼写正确。但我仍然面临同样的问题

Vue模板

想知道我们什么时候发布新配方吗？
启用通知
通知PWA


食谱

Vue.js中的脚本

从“firebase/app”导入firebase；
从“axios”导入axios；
导入“firebase/messaging”；
导出默认值{
数据（）{
返回{
//使用getter和setter在本地存储中监视用户的通知首选项
获取请求权限（）{
返回（localStorage.getItem（“notificationPref”）==null）
},
设置请求权限（值）{
console.log（值）
setItem（“notificationPref”，值）
}
}
}
,
方法：{
注册令牌（令牌）{
轴心柱(
“/api/注册令牌”，
{
令牌：令牌
},
{
标题：{
“内容类型”：“应用程序/json”，
接受：“应用程序/json”
}
}
)。然后（响应=>{
console.log（响应）
});
},
启用通知（）{
如果（！（“窗口中的通知”）{
警报（“不支持通知”）；
}else if（Notification.permission==“已授予”）{
this.initializefrebase（）；
}else if（Notification.permission！=“拒绝”）{
Notification.requestPermission（）。然后（（权限）=>{
如果（权限==“已授予”）{
this.initializefrebase（）；
}
})
}否则{
警报（“没有发送通知的权限”）
}
this.requestPermission=Notification.permission；
},
initializefrebase（）{
if（firebase.messaging.issuported（））{
让配置={
apiKey:“xxxxxxxxxxxxxxxx”，
authDomain:“XXXXXXXXXXXXX”，
projectId:“xxxxxxxxx”，
messagingSenderId:“XXXXXXXXXXXX”，
appId:“xxxxxxxxxxxxxxxxxxxxxxxxxx”，
};
firebase.initializeApp（配置）；
const messaging=firebase.messaging（）；
messaging.getToken（）
。然后（（令牌）=>{
console.log（令牌）；
this.registerToken（令牌）
})
.catch（（错误）=>{
console.log（'检索令牌时出错'，err）；
});
onMessage（函数（有效负载）{
日志（“收到消息”，有效载荷）；
设n=新通知（“新配方警报！”）
});
}
}
}
};

---

有什么方法可以解决这个问题吗？

我认为您应该使用计算属性：

export default {
  data () {
    return {
      requestPermissionValue: null
    }
  },
  computed: {
    requestPermission: {
      get () {
        return this.requestPermissionValue
      },
      set (value) {
        this.requestPermissionValue = value
        localStorage.setItem("notificationPref", value)
      }
    }
  },
  created () {
    this.requestPermissionValue = localStorage.getItem("notificationPref") === null
  }
}

只要不更改另一个组件中的notificationPref localStorage项，它就可以正常工作

---

所创建的钩子生成基于localStorage的值的初始副本。localStorage不是被动的，这就是为什么您需要数据中的属性。

您的get&set requestPermission方法应该位于

computed

属性中

<script>
    import firebase from "firebase/app";
    import axios from "axios";
    import "firebase/messaging";

    export default {
        data() {
            return {
                // use a getter and setter to watch the user's notification preference in local storage
                get requestPermission() {
                    return (localStorage.getItem("notificationPref") === null)
                },
                set requestPermission(value) {
                    console.log(value)
                    localStorage.setItem("notificationPref", value)
                }
            }
        }
        ,
        methods: {
            registerToken(token) {
                axios.post(
                    "/api/register-token",
                    {
                        token: token
                    },
                    {
                        headers: {
                            "Content-type": "application/json",
                            Accept: "application/json"
                        }
                    }
                ).then(response => {
                    console.log(response)
                });
            },

            enableNotifications() {
                if (!("Notification" in window)) {
                    alert("Notifications are not supported");
                } else if (Notification.permission === "granted") {
                    this.initializeFirebase();
                } else if (Notification.permission !== "denied") {
                    Notification.requestPermission().then((permission) => {
                        if (permission === "granted") {
                            this.initializeFirebase();
                        }
                    })
                } else {
                    alert("No permission to send notification")
                }
                this.requestPermission = Notification.permission;
            },

            initializeFirebase() {
                if (firebase.messaging.isSupported()) {
                    let config = {
                        apiKey: "xxxxxxxxxxxxxxxxxxx",
                        authDomain: "xxxxxxxxxxxxxx",
                        projectId: "xxxxxxxxxx",
                        messagingSenderId: "xxxxxxxxxxxxx",
                        appId: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
                    };
                    firebase.initializeApp(config);
                    const messaging = firebase.messaging();

                    messaging.getToken()
                        .then((token) => {
                            console.log(token);
                            this.registerToken(token)
                        })
                        .catch((err) => {
                            console.log('An error occurred while retrieving token. ', err);
                        });

                    messaging.onMessage(function (payload) {
                        console.log("Message received", payload);
                        let n = new Notification("New Recipe alert!")
                    });
                }
            }
        }
    };
    

export default {
  data () {
    return {
      requestPermissionValue: null
    }
  },
  computed: {
    requestPermission: {
      get () {
        return this.requestPermissionValue
      },
      set (value) {
        this.requestPermissionValue = value
        localStorage.setItem("notificationPref", value)
      }
    }
  },
  created () {
    this.requestPermissionValue = localStorage.getItem("notificationPref") === null
  }
}