vue ts项目怎样全局添加一个计算属性

wgf4242
  • 90

比如

//main.ts
Vue.prototype.currentGroup = function() {return JSON.parse(localStorage.getItem('currentUser') as any).group}();

模板文件里使用{{currentGroup}}切换页面发现它不会更新,只执行过一次。

Vue.prototype.currentGroup = function() {return JSON.parse(localStorage.getItem('currentUser') as any).group};

{{currentGroup()}}这可以,但是要多写个()。,,不想写行么。。

回复
阅读 3.4k
1 个回答
然后去远足
  • 34.4k
✓ 已被采纳

你这也不叫计算属性啊,你这就是个方法、然后立即执行(即 IIFE)了啊。

计算属性好歹得是:

Object.defineProperty(Vue.prototype, 'currentGroup', {
    get() {
        return JSON.parse(localStorage.getItem('currentUser') as any).group;
    }
});

吧?

但这么做其实是有问题的,这样是脱离 Vue 生命周期的,Vue 无法检测到数据的变化。你要是不在意这个问题,倒也就将就了。

你这种场景(每个组件内都使用同一个数据源)正确的姿势应该是用 state + mixin、而不是搞什么全局计算属性。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏