小编Riz*_*han的帖子

我试图理解可组合项的目的。我有一个像这样的简单可组合项，并试图从 Pinia 商店观看watch不触发的状态：

import { ref, watch, computed } from "vue";
import { storeToRefs } from "pinia";
import useFlightsStore from "src/pinia/flights.js";
import usePassengersStore from "src/pinia/passengers.js";

export function useFlight() {
    const route = useRoute();

    const modalStore = useModalStore();
    const flightsStore = useFlightsStore();
    const { selection } = storeToRefs(flightsStore);

    const passengersStore = usePassengersStore();
    const { passengers, adults, children, infants } =
        storeToRefs(passengersStore);

    watch([adults, children, infants], (val) => console.log('value changes', val))

Vue 组件中的相同功能按预期工作。

那么我们无法观察可组合项内的值？

我在 Vite.js 上使用 Vue 3 和 Eslint + Airbnb 配置。Airbnb 配置有一个规则eslint(import/no-unresolved)，这很好，但 Eslint 不知道如何解析别名路径。

我想对路径 \xe2\x80\x94 使用别名，例如：\nimport TableComponent from \'@/components/table/TableComponent.vue\'\xcb\x99

环境是纯 JavaScript 的。

我设法设置了我的vite.config.js应用程序可以解析这样的路径：

import path from \'path\';\nimport { defineConfig } from \'vite\';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [vue()],\n  resolve: {\n    alias: [{\n        find: "@", replacement: path.resolve(__dirname, \'src\')\n      },],\n  },\n});\n

Vue 应用程序的工作方式如下并正确解析导入路径，但 Eslint 不断报告错误：Unable to resolve path to module eslint(import/no-unresolved)

我如何以及在哪里可以告诉 Eslint 如何解析别名？

我已经尝试过：\ninstall eslint-plugin-import eslint-import-resolver-alias --save-dev

根据这篇文章，我想导入组件以动态查看我的 Vue 3 应用程序。视图的代码如下所示：

<template>
  <div class="page">
      <latest-box v-if="showLatestBox" />
  </div>
</template>


<script>
// @ is an alias to /src
// This works well. 
//import LatestBox from '@/components/LatestBox.vue'


export default {
    name: 'Page 1',

    data() {
        return {
            showLatestBox: true,
        }
    },

    components: {
        LatestBox: () => import('@/components/LatestBox.vue')  // This does not work
    }
}
</script>

代码不会引发任何错误，但我在页面上看不到该组件。如果我使用第一个导入样式，它就可以工作。我错过了什么吗？

我在 Jest 中有以下组件的测试套件。我已经成功地为其他几个遵循类似结构的组件编写了单元测试：

import { createLocalVue, mount } from '@vue/test-utils'
import Vuex from 'vuex'
import storeMock from '@mocks/store'
import RequestProposalsContainer from '@/components/RequestProposals/RequestProposalsContainer'

describe('ProviderComparison component', () => {
  let localVue, store, wrapper, storeSetup

  beforeEach(() => {
     localVue = createLocalVue()
     localVue.use(Vuex)

     storeSetup = storeMock()
     store = new Vuex.Store(storeSetup)
     /* wrapper is undefined and I'm not sure why */
     wrapper = mount(RequestProposalsContainer, {
       localVue,
       store
     })
  })

  it('renders correct structure', () => {
     /* undefined */
     console.log('wrapper: ', wrapper)
  })
})

通过检查，正在安装的组件、store 和 …

我的 Javascript 构建过程最终将关键字插入require()到文件中。客户端不支持此操作，并会导致控制台错误。我已经添加了browserify其他 SO 答案，但是，我又收到了另一个错误（如下）。

附加信息：

我在用：

1. 咕噜4
2. 节点（v14.2.0）

错误：

[16:03:55] Using gulpfile /mnt/c/code/mutationObserver/gulpfile.js
[16:03:55] Starting 'default'...
[16:03:55] Starting 'clean'...
[16:03:55] Finished 'clean' after 10 ms
[16:03:55] Starting 'html'...
[16:03:55] Starting 'js'...
[16:03:55] Starting 'css'...
[16:03:55] Finished 'html' after 46 ms
[16:03:55] Finished 'css' after 51 ms
[16:03:55] 'js' errored after 54 ms
[16:03:55] Error: Can't walk dependency graph: Cannot find module '/mnt/c/code/mutationObserver/src/js/*.js' from '/mnt/c/code/mutationObserver/src/js/_fake.js'
    required by /mnt/c/code/mutationObserver/src/js/_fake.js
    at /mnt/c/code/mutationObserver/node_modules/resolve/lib/async.js:136:35
    at load (/mnt/c/code/mutationObserver/node_modules/resolve/lib/async.js:155:43)
    at onex (/mnt/c/code/mutationObserver/node_modules/resolve/lib/async.js:180:17) …

我有一个正在为其编写测试的小吃栏组件。它包含一个子组件（一个按钮，单击时关闭小吃栏）。

此按钮发出一个@click事件，父级侦听并运行一个方法来关闭小吃栏或打开另一个小吃栏。

有没有办法嘲笑$emit？我似乎无法在任何地方找到与此相关的内容。

import { render, fireEvent, waitFor } from '@testing-library/vue';
import Snackbar from '../Snackbar.vue';
import EventBus from '@/services/EventBus';

describe('Snackbar', () => {
    const role = 'alert';
    
    it('should close snackbar on button click', async () => {
        const type = 'success';

        const { getByRole } = render(Snackbar, {
            // with this the button is inaccessible
            stubs: ['OBButton'],
        });

        await EventBus.$emit('addSnack', {
            type,
        });

        const snackbar = getByRole('alert');

        // this is wrong...
        await fireEvent.click(button);
  
        // this expect …

考虑这个构建错误：

src/views/IndividualProgramView.vue:18:63 - error TS2345: Argument of type 'string | string[]' is not assignable to parameter of type 'string'.
  Type 'string[]' is not assignable to type 'string'.

18 const ProgramForm = () => programStore.renderProgramExercises(route.params.program);

我试图找到这条路线中的参数：/program/1使用route.params.program.

这怎么能string[]作为一种类型返回呢？

然后我将此值传递给需要字符串的函数：

renderProgramExercises(id: string): VNode {

我该如何修复这个构建错误。

我做了以下工作，但我觉得这是错误的：

renderProgramExercises(id: string | string[]): VNode {

谢谢你，

我的组件排列如下：

app-home
  shadow-root
    component1
      shadow-root
        div id=div1

换句话说，我的 app-home 和 component1 都有影子 dom。

我可以在 Stenciljs E2E 测试中轻松找到 component1，如下所示：

const page = await newE2EPage();
await page.setContent('<app-home></app-home>');
const component1 = await page.find('app-home >>> component1');

但是，无论我尝试过什么，我都无法在 component1 中获取#div1。获取 E2EElement 非常重要，这样我就可以使用它的方法，例如单击触发页面中的更改。

这是我尝试过的：

1. page.find('app-home >>> component1 >>> #div1')

   返回空值

2. component1.find(':host >>> #div1')或component1.find(':root >>> #div1')或component1.find('>>> #div1')或component1.find('#div1')或或component1.find('component1 >>> #div1')

   返回空值

3. component1.shadowRoot.querySelector('#div1')

   此方法获取一个元素，但单击它或向其分派事件对页面中的 app-root 或 component1 没有影响。

那么，当两个元素都有 ShadowDOM 时，如何找到子元素的子元素，有什么建议吗？

我正在开发我的第一个 Vue 项目。我习惯了 React 和 vanilla js，但在这里只是了解 Vue 中的一些概念。

特别是，从 Pinia 存储导入状态和操作属性，并且似乎必须在单个 Vue 组件中多次导入这些属性（我不需要在 React 中执行此操作）。

在此示例中，我导入一个简单的计数值和一个增量函数，并尝试在几个不同的地方使用它们：

<script setup>
// I import everything initially in setup, which works fine,
// and these props (currentCount and incrementCount)
// can be used in my template:
import { storeToRefs } from 'pinia';
import { useStore } from '@/stores/store';
const { currentCount } = storeToRefs(useStore());
const { incrementCount } = useStore();
</script>

<template>
  <main>
    Current count: {{ currentCount }}
    <button @click="incrementCount">Increment</button>
  </main>
</template>

<script> …

我有这个 .ts 文件：

import { reactive, toRefs } from 'vue'

export const TitleComponent = () => {
  const obj = reactive({
    title: "This should be reactive"
  }) 

  const updateObj = () => {
    obj.title = 'This is now different'
  }
  return {...toRefs(obj), updateObj }

}

然后我将 is 导入到一个显示它的 vue 组件中

<template>
  <h1>{{ title }}</h1>
</template>
import { defineComponent } from 'vue'
import { TitleComponent } from 'some/place'

export default defineComponent({
  const { title } = TitleComponent()
  return { title } …

我想在这个问题前说：如果我的处理方式错误，请随时完全重新引导我。

所以我喜欢在终端中工作，我想像 Postman 一样设置 cURL，并提供您可以发出的各种 GET/POST 请求。

所以我只是制作这个超级简单的 .md 文件：

获取产品

! curl http://127.0.0.1:8000/api/products

邮政产品

! curl -H "Content-Type: application/json" -d "@product.json" http://127.0.0.1:8000/api/products

然后我将其与 VIM 命令结合起来：

map te yyq:p

它的基本作用是复制光标所在的行，在 vim 中打开终端历史记录并将该行粘贴到其中。我不知道如何执行该命令（即<Enter>不起作用）。

如何复制光标所在的行，打开终端历史记录，然后按 Enter 键而不关闭窗口，以便我可以看到结果？

再说一次......我可能做错了:)

我正在使用 Vue 前端、Express 和 Parse（解析平台）作为后端创建一个单页应用程序。每当我验证用户身份时，我都会将用户信息放入会话变量中req.session.user = result;，然后将其发送回客户端res.status(200).send(req.session);。每当用户通过应用程序路由时，如何安全地检查身份验证是否有效？我担心的是，session id放入客户端 cookie 中的内容可能会被伪造，并且用户将被视为经过身份验证。我相信我可以向后端发送一个请求，以检查每次用户输入路线时身份验证是否有效，但我认为这不是一个好主意，因为 vue 应用程序中的路由非常快，如果数百个用户快速导航可能会导致一个问题。我还能做什么？或者我是否以正确的方式做/思考它？

我用来express-session将客户的会话存储到他的 cookie 中。

app.use(session({
secret: 'secret_key',
resave: false,
saveUninitialized: true,
cookie: {} }));

这是我登录用户的方式：

 Parse.User.logIn(username, password).then(result => {
     req.session.user = result;
     res.status(200).send(req.session);
 });

有这个代码：

<li v-for="(dog, index) in dogs" :key="index" class=" hover:bg-gray-50" :class="{ 'bg-red-50': index === focus }" @keyup.enter="goToSlug(dog)"> .... </li>

我完美地处理了焦点，但想在按下 Enter 键时运行 goToSlug() 方法。它不会触发该方法。