小编Lyo*_*lux的帖子

使用 Vite 和 Vue 进行的构建就像一个魅力（路径也是正确的）。然而，故事书却没有。

这是我的配置：

vite.config.js

import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: { 
         additionalData: `@import "./src/css/global.scss";` 
     },
    },
  },
})

.storybook/main.js：

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-scss"
  ],
  "framework": "@storybook/vue3",
  "core": {
    "builder": "storybook-builder-vite"
  }
}

我正在使用 Storybook-builder-vite，因为 vite 也用于构建项目。

包.json

"devDependencies": {
    "@storybook/addon-actions": "^6.4.18",
    "@storybook/addon-essentials": "^6.4.18",
    "@storybook/addon-links": "^6.4.18",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/vue3": …

我目前正在 Storybook 中与 Vuex 作斗争。const store = useStore()我在函数中使用它setup。

但是我没有找到将自定义存储注入组件的方法。

我肯定可以在故事书配置文件中全局注入一个商店，preview.js如下所示：

import { app } from '@storybook/vue3';
import store, { key } from '@/store';

app.use(store, key);

有没有办法为使用组合 API 的组件故事创建自定义存储（useStore() 来访问 Vuex）？

我搜索存根~/server/middleware/auth服务器中间件，即简单的真/假服务器身份验证中间件。在目前的情况下，我正在应用程序的后端进行集成测试。首先调用路由，然后检查返回的响应和数据库中更新的值。我有身份验证的情况：如果用户未登录，请确保路由返回预期的错误。

当前行为：

• 检查活动目录发出的 JsonWebToken

中间件的预期行为：

import { Ref } from '@vue/runtime-dom'
import { ref } from 'vue'
import { defineEventHandler } from 'h3'

const NOT_LOGGED_IN = null
export const isLoggedIn: Ref<{ email: string, name: string } | typeof NOT_LOGGED_IN> = ref(NOT_LOGGED_IN)

export const useAuthUserMock = () => ({
  resetAuthMockUser: () => isLoggedIn.value = NOT_LOGGED_IN,
  setAuthMockUser: (email = 'user.mock@email.com', name = 'User Mock') => {
    isLoggedIn.value = {
      email, name
    }
  }
})

export default defineEventHandler((event) => {
  event.context.auth …

我在 Nuxt 3 中使用一些实用程序。vue 反应系统（ref，computed , ...）也是直接导入的。然而，测试的情况并非如此。

运行导入可组合项的规范文件./useBusinessValidation会引发错误ReferenceError: ref is not defined

源文件./useBusinessValidation：

import { MaybeRef } from "@vueuse/core"\n\nexport const useBusinessValidation = <T>(rule: (payload: T) => true | string, payload: MaybeRef<T>) => {\n  const validation = computed(() => rule(unref(payload)))\n\n  const isValid = computed(() => validation.value === true)\n  const errorMessage = computed(() => isValid.value ? undefined : validation.value as string)\n\n  return {\n    isValid,\n    errorMessage\n  }\n}\n

规格文件useBusinessValidation.spec.ts：

我正在从 迁移yarn version 1.22到yarn v3.2.3。我有一个prepare安装后自动运行的脚本。

我的prepare脚本生成一些文件（FIY Nuxt 3 生成的文件）。

它不再在纱线 3 上运行，我怎样才能获得相同的效果？我在https://yarnpkg.com/advanced/lifecycle-scripts上找不到它。也许我读错了。

我正在尝试使用 Vue 解决问题，但我遇到了一些麻烦：

1：我无法从 router/index.js 文件访问我的 getter。（我可以访问它，但它像一个带有返回函数的函数一样返回，我无法调用并获取值）

2：我无法正确设置警卫。使用 Angular 就容易多了

我在这里做错了什么？有什么建议？

路由器代码

/* eslint-disable no-undef */
import Vue from "vue";
import VueRouter from "vue-router";
// import auth from '../store/modules/auth';
import { createNamespacedHelpers } from "vuex";
const { mapGetters } = createNamespacedHelpers("auth");
// import store from '../store';


Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("../components/Home.vue"),
    meta: { requiresAuth: true }
  },
  {
    path: "/users",
    name: "Users",
    component: () => import("../components/Users/Users.vue"),
    meta: { requiresAuth: true } …

我目前很难尝试为 Quasar v2（使用 Vue 3）配置 Storybook。

这是我的依赖项package.json：

"dependencies": {\n    "@quasar/extras": "^1.0.0",\n    "core-js": "^3.6.5",\n    "quasar": "^2.0.0-beta.1",\n    "vue-i18n": "^9.0.0-beta.0"\n},\n"devDependencies": {\n    "@babel/core": "^7.13.14",\n    "@quasar/app": "^3.0.0-beta.1",\n    "@storybook/addon-actions": "^6.2.1",\n    "@storybook/addon-essentials": "^6.2.1",\n    "@storybook/addon-links": "^6.2.1",\n    "@storybook/vue3": "^6.2.1", # \xe2\x9c\x85 storybook for vue3\n    "@types/node": "^10.17.15",\n    "@typescript-eslint/eslint-plugin": "^4.16.1",\n    "@typescript-eslint/parser": "^4.16.1",\n    "babel-loader": "^8.2.2",\n    "prettier": "^2.2.1",\n    "vue-loader": "^16.2.0" # \xe2\x9c\x85 the specific vue loader needed\n    "babel-eslint": "^10.0.1",\n    "eslint": "^7.14.0",\n    "eslint-config-prettier": "^8.1.0",\n    "eslint-plugin-vue": "^7.0.0"\n}\n

这.storybook/main.js：

module.exports = {\n  // the path may be precised …