8000 VueDevTools doesn't pick the Component's state · Issue #422 · vuejs/composition-api · GitHub
[go: up one dir, main page]
Skip to content

VueDevTools doesn't pick the Component's state #422

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
8000
rodolphocastro opened this issue Jul 3, 2020 · 1 comment · Fixed by #424
Closed

VueDevTools doesn't pick the Component's state #422

rodolphocastro opened this issue Jul 3, 2020 · 1 comment · Fixed by #424
Assignees
@antfu
Labels
bug Something isn't working

Comments

@rodolphocastro
Copy link
rodolphocastro commented Jul 3, 2020 •
edited
Loading

Hello!

On the latest release 1.0.0-beta.1 there seems to be an issue with VueDevTools (both Chrome Firefox versions) and the Composition API.

This is presented as a This instance has no reactive state. message even when a state is clearly returned. The objects themselves are reactive (for instance if I simply dump a reactive object on a <p> it gets updated properly)

Components

The components I'm using are:

<template>
  <div>
    <nav>
      <span>
        <a
          href="http://"
          target="_blank"
          rel="noopener noreferrer"
          @click="changeToComponent(0)"
        >Browse</a> /
      </span>
      <span>
        <a
          href="http://"
          target="_blank"
          rel="noopener noreferrer"
          @click="changeToComponent(1)"
        >Create</a>
      </span>
    </nav>
    <component v-bind:is="currentComponent"></component>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from '@vue/composition-api'
import depotState from '@/state/Depot'

export default defineComponent({
  components: {
    'browse-depots': () => import('./Browse.vue')
  },
  setup () {
    const componentIndex = ref(0)
    const components = ['browse-depots', 'edit-depot', 'view-depot']
    return {
      changeToComponent: (idx: number) => {
        if (components[idx] !== null) {
          componentIndex.value = idx
        }
      },
      currentComponent: computed(() => components[componentIndex.value]),
      depots: depotState.depots
    }
  }
})
</script>

Reproducing the Bug

Using the following versions results in the error:

{
  "name": "depot",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@exampledev/new.css": "^1.1.3",
    "@vue/composition-api": "^1.0.0-beta.1",
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-pwa": "~4.4.0",
    "@vue/cli-plugin-typescript": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "typescript": "~3.9.3",
    "vue-template-compiler": "^2.6.11"
  }
}

image

Working sample with version

Reverting to the ^0.6.7 version results in a working state

{
  "name": "depot",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@exampledev/new.css": "^1.1.3",
    "@vue/composition-api": "^0.6.7",
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-pwa": "~4.4.0",
    "@vue/cli-plugin-typescript": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "typescript": "~3.9.3",
    "vue-template-compiler": "^2.6.11"
  }
}

image
@antfu antfu self-assigned this Jul 4, 2020
@antfu antfu added the bug Something isn't working label Jul 4, 2020
@antfu

This comment has been minimized.

Sign in to view
@antfu antfu mentioned this issue Jul 4, 2020
Merged
@antfu antfu closed this as completed in #424 Jul 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@antfu antfu

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: remove "browser" field in package.json antfu/composition-api
2 participants
@rodolphocastro @antfu
0