我想通过说明我在 C# 中的背景来优先考虑这一点，所以我喜欢在我的类中声明方法。我创建了一个包含属性和方法的用户类，并将其添加到我的 vuex-persistedstate 中。其中一种方法是清除属性的 logout() 方法。当我尝试调用此方法时，出现以下错误：
TypeError: this.$data.user.logout is not a function
然后我查看了本地存储并注意到用户没有引用类方法。所以我继续将方法中的逻辑复制到我的 vue 组件中并且它工作了所以我假设问题是 vuex-persistedstate 没有保存对方法的引用，这就是方法调用不起作用的原因。
我想在一个位置声明注销方法，而不是将其分散到 vue 组件中，实现此目的的最佳实践是什么？是否可以在类声明中执行此操作，还是需要用户帮助文件？
【问题讨论】：
当然是伯科！我的代码也在 GitHub 上，所以你也可以在那里查看，但在我看来，vuex 基本上不存储方法。您应该查看的第一个文件是我的 user.js 文件：
在这个文件中，我有一个称为浅克隆的方法，它获取从 API 接收到的信息并将其分配给用户：
shallowClone(data) {
if (data !== undefined) {
this.id = data.id;
this.userName = data.userName;
this.firstName = data.firstName;
this.lastName = data.lastName;
this.nickName = data.nickName;
this.fullName = data.fullName;
this.email = data.email;
this.isActive = data.isActive;
this.isAdmin = data.isAdmin
this.isSuperUser = data.isSuperUser;
this.dateCreated = data.dateCreated;
this.dateUpdated = data.dateUpdated;
this.isLoggedIn = data.isLoggedIn;
}
}
您当然不需要将其抽象出来，但我发现它使代码更易于维护。
然后在 mount() 生命周期钩子中，我通过 shallowClone 方法将从 API 接收到的用户分配给组件用户。请记住，我在这个项目上做了额外的工作，登录表单现在是它自己的组件，它从应用程序接收用户作为道具：
mounted() {
let self = this;
window.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
self.authenticate();
}
});
this.$data.user = new User();
this.$data.user.shallowClone(this.$props.userForAuthentication);
},
完整的代码可以在这里查看：
【讨论】：
我找到了解决方案...我正在努力改进它。基本上，我使用从 localstorage 中提取到 vuex 的值在 vue 组件中创建一个新的用户对象，该对象引用位于我的用户类声明中的方法。我想起了我们应该创建从 vuex 中提取的对象的克隆以在 vue 组件中使用的建议。我仍在完善代码，但这是基本想法。
【讨论】：