vue3 关于$data和mixins取消，如何替代？

  • Z时代
  • 2024-02-08
  • 分类：IT

大佬们好，

我在vue2中经常使用$data和mixins，但是这些在vue3中都取消了，想问下该如何替代

$data在vue2中的业务场景：
由B页面返回A页面执行刷新，从created获取session，取出A页跳转前存储的数据，这样刷新后能保留用户之前填写的内容
我是遍历session中存储的对象与$data对象比较，如果名称匹配则赋值，这样data中的几十个变量赋值起来很便捷
vue3中只能一个个赋值吗？

const a = ref(session.a) 
const b = ref(session.b)
......

mixins在vue2中的业务场景：
mixins可以直接访问父文件的所有data和方法

function a(){
    this.父文件.x，做一些事
    this.父文件.y
    this.父文件.z
    等等，可能一个方法需要用到十几个data中声明的变量，最终执行完成即可，不需要return
}

如果用hook替代
需要这样写吗？

const a = hook(x.value,y.value,z.value,..........)，要传十几个？

hook里return出变量或方法后，还需要在父文件里继续处理方法，因为没办法直接在hook里执行父文件的方法

请教是否有解决方法？感谢~~~

回答：

import { reactive } from 'vue'
    const data = reactive({ /* ... */ })

hook

import { ref, computed } from 'vue'
export function useSomeFeature(x, y, z) {
  // 在这里mixins中一样用x, y, z
  // ...
  return { /* ... */ }
}

使用：

import { useSomeFeature } from './composables'
    const x = ref(0)
    const y = ref(0)
    const z = ref(0)
    const someFeature = useSomeFeature(x, y, z)
    // ...

以上是 vue3 关于$data和mixins取消，如何替代？ 的全部内容， 来源链接： utcz.com/p/934391.html

回到顶部