时间戳

首页 > 解决方案 > 无效的监视源：“$route”vuejs

vue.js - 无效的监视源：“$route”vuejs

问题描述

我有一个 Vue 组件，它曾经与$route.
由于我做了一些升级，它不再起作用，我收到消息：

[Vue 警告]：无效的监视源：“$route”。监视源只能是 getter/effect 函数、ref、反应对象或这些类型的数组。

这是我的package.json：

{
    "name": "prix-de-gros.vue",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "@vue/composition-api": "0.6.6",
        "axios": "^0.19.2",
        "chart.js": "^2.9.3",
        "core-js": "^3.6.5",
        "moment": "^2.27.0",
        "regenerator-runtime": "^0.13.7",
        "remove": "^0.1.5",
        "slugify": "^1.4.5",
        "tiptap-vuetify": "^2.24.0",
        "vue": "^2.6.12",
        "vue-i18n": "^8.21.0",
        "vue-router": "^3.4.3",
        "vuetify": "^2.3.9",
        "vuex": "^3.5.1",
        "webpack": "^4.44.1"
    },
    "devDependencies": {
        "@mdi/js": "^5.5.55",
        "@vue/cli-plugin-babel": "^4.5.4",
        "@vue/cli-plugin-eslint": "^4.5.4",
        "@vue/cli-plugin-router": "^4.5.4",
        "@vue/cli-plugin-vuex": "^4.5.4",
        "@vue/cli-service": "^4.5.4",
        "@vue/eslint-config-prettier": "^6.0.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^7.7.0",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-vue": "^6.2.2",
        "moment-locales-webpack-plugin": "^1.2.0",
        "prettier": "^2.1.0",
        "sass": "^1.26.10",
        "sass-loader": "^9.0.3",
        "vue-cli-plugin-vuetify": "^2.0.7",
        "vue-template-compiler": "^2.6.12",
        "vuetify-loader": "^1.6.0"
    },
    "resolutions": {
        "prosemirror-model": "^1.11.0",
        "prosemirror-tables": "^0.9.0"
    }
}

和我的 Vue 组件（带有 的 Vue 2 @vue/composition-api）：

<template>
  <div class="container">
    <v-card>
      <v-toolbar dark color="primary" dense class="mb-2">
        <v-btn text @click="goToRoute({ name: 'account' })">{{ $tc("Account", 2) }}</v-btn>
        {{formatInt( data.id) }} - {{ data.label }}
        <v-spacer></v-spacer>
        <v-btn
          v-if="data.editable"
          :aria-label="$tc('Update')"
          icon
          @click="
            goToRoute({
              name: 'account-update',
              params: { id: data.id }
            })
          "
        >
          <v-icon aria-hidden="true">{{ mdiPencil }}</v-icon>
        </v-btn>
      </v-toolbar>

      <v-card-text>
        <v-row dense>
          <v-col cols="12" sm="3" class="label-col">{{ $tc("Account") }}</v-col>
          <v-col>{{ formatInt(data.id) }}</v-col>
        </v-row>
        <v-row dense>
          <v-col cols="12" sm="3" class="label-col">{{ $tc("Label") }}</v-col>
          <v-col>{{ data.label }}</v-col>
        </v-row>
        <v-row dense class="my-4">
          <v-col cols="12" sm="3" class="label-col">{{ $tc("Status") }}</v-col>
          <v-col>{{ data.status ? $tc("On") : $tc("Off") }}</v-col>
        </v-row>
        <v-row v-if="data.info" dense>
          <v-col cols="12" sm="3" class="label-col">{{ $tc("Info") }}</v-col>
          <v-col v-html="nl2br(data.info)"></v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
import axios from "axios";
import { mdiPencil } from "@mdi/js";
import { formatInt, nl2br } from "@/plugins/ob-helper";
import { ref,  watch } from "@vue/composition-api";

export default {
  name: "AccountView",

  setup(props, { root: { $i18n, $router, $i18nRoute, $route } }) {
    const data = ref({});

    function dataGet() {
      axios
        .get("/backend/accounts/" + $route.params.id)
        .then(r => {
          if (r.data) {
            data.value = r.data.data;
            document.title = $i18n.tc("Account", 2) + " : " + data.value.id;
          }
        })
        .catch(error => {
          if (error.response.status !== 400 && error.response.status !== 401) {
            alert(error.response.statusText);
          }
        });
    }

    function goToRoute(o) {
      $router.push($i18nRoute(o));
    }

  watch("$route", () => dataGet());

    return {
      data,
      formatInt,
      goToRoute,
      mdiPencil,
      nl2br
    };
  }
};
</script>

标签： vue.jsvue-routervue-composition-api

解决方案

$route当反应性上下文对象被解构时，反应性会丢失（如问题 #264 中所述@vue/composition-api）。该watch方法必须保留对反应对象的引用以保持其反应性：

export default {
  // DON'T DO THIS
  // setup(props, { root: { $route } }) {     // reactivity lost!

  // DON'T DO THIS
  // setup(props, context) {
  //   const { root: { $route } } = context   // reactivity lost!    
  // }

  setup(props, context) {
    // reactive!
    watch(() => context.root.$route, () => dataGet())
  }
}

演示

通过@vue/composition-api1.0.0-beta.11 和 Vue 2.6.11验证

推荐阅读