标签: vue-mixin

当我尝试将 prop 传递给 mixin 时，我得到一个Cannot read property of undefined error.

我做错了什么或者我还能如何克服这个问题？

mixins/BarMixin.js:

export default baz => {
  return {
    // my mixin code...
  }
}

components/FooComponent.vue:

<script>
import BarMixin from '@/mixins/BarMixin.js'

export default {
  mixins: [BarMixin(this.baz)],
  props: {
    bar: {
      type: Boolean,
      required: true,
    },
  },
}
</script>

然后我尝试使用它，如下所示：

pages/foo.vue

<template>
  <FooComponent :baz="true" />
</template>

<script>
import FooComponent from '@/components/FooComponent.vue'
export default {
  components: {
    FooComponent,
  },
}
</script>

我有这样的文件夹结构

--Page    
   -group.vue    
--Services
  -groupMixin.ts

group.vue的脚本

<script lang="ts">
     import { Vue, Component, Mixins } from 'vue-property-decorator'

     import { GroupMixin } from '../../services/groupMixin';
     @Component
     export default class Group extends Mixins(GroupMixin) {
        created () {
          console.log(this.test)
        }
      }
</script>

groupMixin.ts的代码

import { Vue } from 'vue-property-decorator'
//creating mixins.
export class GroupMixin extends Vue {
  test: string = 'sss'
}

我在这里面临两个问题。

首先，要导入我使用../../的ts文件，有什么方法可以使用./或@ /。无需使用lang =“ ts”，我可以导入这样的js文件@ / services / ...

其次，无法访问我在groupmixin.ts中声明的可变测试。

我想为每个路线动态设置窗口的标题，因此在每个routes: []子对象中都有一个meta: { title: ... }对象。例如：

routes: [
{
  path: 'profile/:id',
  name: 'Profile',
  component: Profile,
  meta: {
    title: function (to, cb) {
      const profileId = parseInt(to.params.id);
      // ... do stuff ...
    }
  }
}
]

我称呼这个标题函数afterEach：

router.afterEach((to) => {
    document.title = 'My Site';
    if (to.meta && to.meta.title) {
        to.meta.title(router.app, to, (result) => { document.title += ' | ' + result; });
    }
});

在... do stuff ...部分我想打电话从我的混入的方法GetAndStore.js叫loadProfile(profileId)。我已添加GetAndStore …

我试图在 Vue.js v2.x 中创建一个 mixin，但每次我调用它的方法之一时，控制台都会显示错误：

TypeError: mixins_settings_js__WEBPACK_IMPORTED_MODULE_3 _.default.loadSettings 不是 eval 处的函数 (Login.vue?7463:102)

/src/mixins/setting.js

import vuex from "@/plugins/vuex.js"
import menu from "@/settings/menu.json";

export default {
  methods: {
    _traverse(jsonObj) {...},
    loadSettings() {
      this._traverse(menu);
      ...
    }
  }
}

/src/components/Login.vue

...
import settings from "@/mixins/settings.js"

export default {
  mixins: [settings],
  data() {
    return {...};
  },
  methods: {
    onSubmit() {
      ...
      settings.loadSettings();
    }
  }
}

我哪里错了？

所以我们有一个 Vue.js mixin，它是在单个组件中继承的。mixin 有一个由少数组件继承的模板，它可以正常工作。但是，我不知道如何使用 vue-test-utils 测试模板。

这是我正在做的事情的一个简化示例：

describe('MiMixin', () => {
    let wrapper

    wrapper = mount({
        mixins: [MiMixin]
    })

    it('should set the mixin template as the markup', () => {
        wrapper.find('.mi-component').trigger('click')
    })
})

当我运行它时，我收到消息：

[vue-test-utils]: find did not return .mi-component, cannot call trigger() on empty Wrapper

如果我向挂载的 Vue 组件添加渲染函数，它只会渲染我返回的任何标记（如预期）。但是，当没有 render 方法（因此也没有模板）时，组件的 html 是未定义的。

问题：

1. 为什么'find'函数找不到mixin的模板？
2. 单独测试 mixin 是否正确，还是在真实组件中测试它更好？

注意：模板似乎确实存在于 VueComponent 下的包装器中：

VueWrapper {
    vnode: [Getter/Setter],
    element: [Getter/Setter],
    update: [Function: bound update],
    options: { attachedToDocument: false },
    version: 2.5,
    vm: …

我为 Vue 2 编写了一个“加载状态”mixin：

export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      innerLoading: false,
    }
  },
  mounted () {
    this.innerLoading = !!this.loading
  },
  methods: {
    startLoading () {
      this.$emit('update:loading', this.innerLoading = true)
    },
    stopLoading () {
      this.$emit('update:loading', this.innerLoading = false)
    },
  },
  computed: {
    isLoading () {
      return !!this.innerLoading
    },
    isNotLoading () {
      return !this.innerLoading
    },
  },
  watch: {
    loading (loading) {
      this.innerLoading = !!loading
    },
  }
}

我将此混合用于其他组件以保持loading …