Skip to content

Beta 4: invalid context(this) of mixins when used vuex and custom mixin #885

Closed
@armano2

Description

@armano2

Version

5.0.0-beta.4

Browser and OS info

Windows 10 / Firefox

Steps to reproduce

Edit Vue Template

import Vue from "vue";
import Vuex from "vuex";

function mixin(_Vue) {
  _Vue.mixin({
    computed: {
      test() {
        if (this.$options.test) {
          return this.$options.test;
        }
        throw new Error("test is not defined");
      }
    }
  });
}

Vue.use(mixin);
Vue.use(Vuex);

/* eslint-disable no-new */
new Vue({
  el: "#app",
  test: 1,
  store: new Vuex.Store({
    state: {
      a: 1
    }
  }),
  computed: {
    foo() {
      return this.$store.state.a;
    }
  },
  template: `<div id="app">
    <h1>{{ test }}</h1>
    <h2>{{ foo }}</h2>
  </div>`
});

What is expected?

No error

What is actually happening?

test is not defined


DevTools are changing context (this) of mixins when store is registered as Vuex.Store instance.
This issue is present only in beta branch of devTools.

This issue is not present when instead of instance of store i provide object.

  store: {
    state: {
      a: 1
    }
  },

EDIT:

i did small simplification of reproduce code

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions