如何使对象属性在依赖于外部对象时具有响应性?

Question

TLDR：

User是一个全局对象。

如果我更改show值，组件将立即更新，没关系。 我想要获得的是"当User.isLoggedIn()变成假时，Log out元素必须隐藏。当它成为真时，元素必须显示，Login/Signup必须隐藏。在我的应用程序中，这个目标将转换为另一个目标，"当我从login、signup或signout页面重定向时，必须更新这些属性(和按钮的状态)。

Toolbar.Vue.

脚本：

<script>
export default {
data() {
return {
items: [
{title: 'Questions', to: '/questions', show: true},
{title: 'Ask question', to: '/askQuestion', show: true},
{title: 'Categories', to: '/categories', show: true},
//  only F5.
{title: 'Login/Signup', to: '/login', show: !User.isLoggedIn()},
{title: 'Log out', to: '/logout', show: User.isLoggedIn()},
]
}
},
}

标记片段：

<router-link
v-for="item in items"
:key="item.title"
:to="item.to"
v-if="item.show"
>

你知道，我正在尝试用 vue 做"注销的事情"。我有那个Toolbar组件，router-linkLogout组件。

注意：我不直接在我的组件中导入User类，但我在我的应用程序中.js这样做。

import User from './helpers/AppUser';
window.User = User;

所以，我认为每个人都可以使用正确的User.此外，此类只是一组方法。主要方法是retrieve()。

在我的Logout组件中有代码：

beforeMount() {
User.logout();
router.push('questions')
// window.location = '/questions'
}

所以，当我注销时，一切都很好(我返回到问题页面)，但我的Log out按钮仍然在这里。

User.isLoggedIn()正常工作(当我F5我的页面时，一切都很好)。

我还提到，如果我更改show值，组件将立即更新，没关系。

这种尝试也不起作用：

{title: 'Login/Signup', to: '/login', show: ()=> !this.isLoggedIn},
{title: 'Log out', to: '/logout', show: ()=> this.isLoggedIn},
],
}
},
computed:{
isLoggedIn: function() {
return User.isLoggedIn();
},

我的临时解决方案是使用window.location = '/questions'而不是vue-router. 也许我需要一些观察者，或者在我的全局 Vue 中添加用户......我不知道。

更新：用户类。

/**
* Class-helper for managing user login/signup part. Also represents the user.
*/
class AppUser {
constructor() {
this.storageKey = 'appUser';
}

/**
* retrieves user data from localStorage. if none stored, returns null
* @return {object}|{null}
*/
retrieve() {
let data = {};
try {
data = JSON.parse(localStorage.getItem(this.storageKey));
} catch (e) {
console.log(e);
} finally {
// console.log(data)
}
return data;
}
/**
* clears localStorageEntry
*/
clear() {
localStorage.removeItem(this.storageKey);
}
/**
* @return boolean
*/
hasId() {
let data = this.retrieve();
return data === null ? false : data.hasOwnProperty('id');
// if id then return true
}
/**
* @return boolean
*/
hasToken() {
let data = this.retrieve();
return data === null ? false : data.hasOwnProperty('jwt');
// if token then return true
}

isLoggedIn() {
// console.log('in user.isLoggedIn')
// try {
return this.hasToken() && this.hasId();
// }
// catch (e) {
//  console.log(e);
// }
}
}

export default AppUser = new AppUser();

Answer 1

您可以在"创建"阶段替换用户的原始方法。

return {
data () {
return {
items: [
{ title: 'Questions', to: '/questions', show: true },
{ title: 'Ask question', to: '/askQuestion', show: true },
{ title: 'Categories', to: '/categories', show: true },
{ title: 'Login/Signup', to: '/login', show: !User.isLoggedIn() },
{ title: 'Log out', to: '/logout', show: User.isLoggedIn() },
]
}
},
created () {
let app = this;
let items = app.items;
let loginUser = User.login.bind(User);
let logoutUser = User.logout.bind(User);
User.login = () => {
// modify the data
items[3].show = false;
items[4].show = true;
// do login
loginUser();
};
User.logout = () => {
// modify the data
items[3].show = true;
items[4].show = false;
// do logout
logoutUser();
};
}
};