小编Mic*_*evý的帖子

我正在使用 Vue 3，包括 Composition API，另外还使用 Pinia 作为状态管理。

在选项 API 中，有一个方法 beforeRouteEnter，该方法内置于组件本身中。不幸的是，这个方法在组合 API 中不存在。这里，本来应该在 beforeRouteEnter 方法中的代码被直接写入 setup 方法中。但是，这意味着首先加载并显示组件，然后执行代码，如果检查失败，则组件将被重定向到错误页面等。

我的想法是直接在路由的 beforeEnter 方法中的路由配置中进行检查。但是，我无法访问 Pinia Store，尽管它之前在 main.js 中调用过，但它似乎尚未初始化。

控制台日志

Uncaught Error: []: getActivePinia was called with no active Pinia. Did you forget to install pinia?
    const pinia = createPinia()
    app.use(pinia)
This will fail in production.

路由器.js

import { useProcessStore } from "@/store/process";

const routes: Array<RouteRecordRaw> = [
{
    path: "/processes/:id",
    name: "ProcessView",
    component: loadView("ProcessView", "processes/"),
    beforeEnter: () => {
      const processStore = useProcessStore();
      console.log(processStore); …

我有以下package.json文件：

{
    "name": "view",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "@vue-leaflet/vue-leaflet": "^0.6.1",
        "autoprefixer": "^10.3.1",
        "core-js": "^3.6.5",
        "gpxparser": "^3.0.8",
        "leaflet": "^1.7.1",
        "postcss": "^8.3.6",
        "tailwindcss": "^2.2.7",
        "typescript": "^4.3.5",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0-0",
        "vue3-openlayers": "^0.1.38",
        "vuex": "^4.0.2"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^5.0.0-beta.3",
        "@vue/cli-plugin-eslint": "^5.0.0-beta.3",
        "@vue/cli-plugin-router": "^5.0.0-beta.3",
        "@vue/cli-service": "^5.0.0-beta.3",
        "@vue/compiler-sfc": "^3.0.0",
        "@vue/eslint-config-prettier": "^6.0.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^7.32.0",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-vue": "^7.0.0",
        "prettier": "^2.2.1",
        "sass": "^1.26.5",
        "sass-loader": "^8.0.2"
    }
}

如何将打字稿添加到这个 …

除了标题之外，无需添加更多内容。我希望向 quasar q-table (laravel / vue3) 添加一个自定义列，该列将保存行编辑/删除操作

我在 vue 中定义了一个路由：

/users/:userId

哪个指向 UserComponent：

<template>
 <div>{{username}}</div>
</template>

我使用computedfrom@vue/composition-api来获取数据。

问题是当路由更改为另一个时userId，通过导航到另一个用户，html 模板中的用户没有像我预期的那样更改。当用户不在列表中时，它也不会重定向。

那么我能做些什么来解决这个问题？

这是我的代码：

<template>
  <div>{{username}}</div>
</template>

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

export const useUsername = ({ user }) => {
  return { username: user.name };
};

export default defineComponent({
  setup(props, { root }) {
    const vm = getCurrentInstance();

    const userToLoad = computed(() => root.$route.params.userId);
    const listOfUsers = [
      { userId: 1, name: 'user1' },
      { userId: 2, …

Vue v3文档展示了一个通过将数组作为参数传递来使用单个观察者观察多个引用的示例

我可以（以及如何）使用类似的方法通过单个观察者同时观察ref和对象？reactive

const state = reactive({
  postPerPage: 10,
  currentPage: 1,
});

const posts = ref([]);

const currentPosts = ref([]);

watch(
  () => posts.value, // store value in currentPosts when the posts.value is updated (get data from api)
  () => {
    currentPosts.value = getCurrentPost(); 
  }
)

watch(
 () => {
  return { ...state };
 }
 () => {
  currentPosts.value = getCurrentPost();
 }
)

我在 TS 中使用 Vue3（最后一个 vue-cli）。

我想在 vue-loader 编译 .vue 文件时获取所有节点（vnodes）元素。我需要读取节点属性并删除所有“数据测试”。

我尝试在 vue.config.js 中使用：

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      // .loader('vue-loader')                       // same with
      .tap((options) => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
modules: [                                           // never enter here
            {
              preTransformNode(node) {
                // if (process.env.NODE_ENV === 'production') {
                const { attrsMap, attrsList } = node
                console.log(node)
                if (attrsMap['qa-id']) {
                  delete attrsMap['qa-id']
                  const index = attrsList.findIndex(
                    (x) => x.name === 'data-test'
                  )

                  attrsList.splice(index, 1)
                }
                // } …

我正在使用 typescript 为 vite、vue 和 vuetify 开发一个简单的脚手架，我想使用 SFC vue 的脚本设置版本

<script setup lang="ts">

我不明白的一件事是如何访问“this”关键字属性？

例如在我的旧 vue 项目中我可以这样写

this.$vuetify.themes.light.colors.primary

所以我能够在组件中的任何位置访问 $vuetify，但现在在脚本设置模式下“this”关键字未定义；如何访问“this”属性？

我在 Vue 路由器中的路线：

{ path: 'articles/create', component: () => import('Detail.vue') },
{ path: 'articles/:id/edit', component: () => import('Detail.vue') },

如您所见，我Detail.vue在两条路线上渲染相同的 Vue 组件。

当 URL从例如变为时，如何“强制”Vue 销毁并重新创建Detail.vue组件？/articles/5/edit/articles/create