如何解决Vue3:如何混合组合 api 和选项 api 以进行组合/混合命名空间
美好的一天!
假设我想将 Vue 与 options api 一起使用,但也不想使用 mixin,因为它们会导致很多问题。我想使用可组合物作为混合来为混合/可组合物提供命名空间。
所以,我的“解决方案”是结合选项 api 和组合 api。
export default {
data() {
return {
person: {
first_name: 'first name',last_name: 'last name',},gender: 'gender'
}
}
所以我决定将其转换为可组合的,如下所示:
export default () => {
const person = reactive({first_name: 'fn',last_name: 'ln'});
const gender = ref('gender');
return {
person,gender,}
}
因此,在我的 .vue 文件中,我可以导入可组合:
<script lang="ts">
import useDataComposable from './dataMixin';
...
export default defineComponent({
...
setup() {
const dataComposable = useDataComposable();
dataComposable.gender.value = 'gender2';
dataComposable.person.first_name = 'first name2';
return {dataComposable};
},created() {
// I want to use data and methods inside the composable as namespace.attribute
// eg:
console.log(this.dataComposable.person.first_name) // => returns 'first name2'
// However,console.log(this.dataComposable.gender // does not return 'gender2';
// but returns Ref object.
...
我知道我可以在setup函数中解构composable并返回它:
<script lang="ts">
import useDataComposable from './dataMixin';
...
export default defineComponent({
...
setup() {
const {person,gender}= useDataComposable();
return {
person,};
},created() {
console.log(this.person.first_name) // => returns 'first name2'
// However,console.log(this.gender // returns 'gender2';
...
然而,这没有意义,因为无论如何它都会与组件状态混淆。
另外,我可以只对一个对象使用 mixin,但我不确定。
export default {
data() {
return {
state: {
person: {
first_name: 'first name',gender: 'gender',myMethod: function() {...},computed: function() {...}
},created() {...},onMounted() {...},watch: {
gender(value) {...}.
},}
}
我很好奇是否有可能做我想做的事。
有没有办法在options api vue代码中使用带有reactive和ref元素的对象?
提前致谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。