小编rol*_*oli的帖子

在撰写本文时，Vue 3.0 已经发布了第一个稳定的v3.0.0 'One Piece' 版本，Vuex 4 处于v4.0.0-beta.4 中。

不幸的是，目前还没有关于如何在 TypeScript 中使用 Vuex 4 模块的官方示例......

作为进一步的要求，我希望在它们自己的文件中存储模块状态、突变、getter 和操作。这使得在这些模块增长时更容易管理代码。

我设法在Github和Codesandbox 中拼凑了一个工作示例存储库。

通过使用这些资源中提供的示例：

• Vuex + TypeScript by Andrew 在 Dev.to
• 要点贾维斯佩雷斯/index.ts
• 回购 andrewvasilchuk/vuex-typescript
• Vue 3 和 Vuex 4：在 Dev.to 中由 Barylski 组合的 useStoreModule
• LogRocket 在 Vuex 中映射的完整指南

但是，仍有一些问题有待解决：

1. 解决依赖循环 linting 错误

目前，模块的index.ts、actions.ts和getters.ts中的类型依赖于RootState从主商店导入。

当使用ESLint Airbnb linting config 时，我遇到了 …

我想知道我应该如何在 vuejs 设置中重置反应？（我知道如果将其更改为 ref 并使用 view.value 将解决此问题，但使用反应式应该有一个答案）

我有一个项目，我想使用 ES 模块并使用import而不是require.

所以我添加了package.json "type": "module".

现在有一种情况，我必须导入一些文件，而我知道的唯一方法是使用require.context.

我的文件（自动导入路由）：

import { createRouter, createWebHistory } from 'vue-router'

/*
 * Auto imports routes from @/pages. It only requires a route.js file inside each page
 * */
function autoImportRoutes() {
  const filePaths = require.context('@/pages/', true, /route.js/)
  console.log(filePaths.keys())
  return filePaths.keys().map(filePath => {
    const pathWithoutLeadingDot = filePath.replace('.', '') // remove first dot of ./path-name
    return require(`@/pages${pathWithoutLeadingDot}`).default
  })
}

const routes = autoImportRoutes()

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL), …

我有一个使用如下设置语法创建的 pinia 商店：

defineStore('id', () => {
  const counter = ref(0)
  
  return { counter }
})

使用设置语法一切都运行良好，因为我可以重复使用其他 pinia 商店。

然而，现在我发现需要在其他页面上重新使用 Pinia 商店，但需要重置它们的状态。

例如，在 Vuex 中，我使用registerModule和unregisterModule来实现拥有一个新鲜商店。

所以问题是：如何使用设置语法重置 pinia 存储？

注意：该$reset()方法仅针对使用对象语法定义的存储实现，因此这不是一个选项。

注 2：我知道我可以通过创建一个函数来手动完成此操作，在该函数中将所有状态值设置为其初始值

注3：我找到了$dispose，但它不起作用。如果 $dispose 是答案，那么它如何重置两个组件之间的存储？

我已经看到了如何使用React的问题,但我想知道如何使用vue.js

我无法从商店访问我的路线。对此或许有一个很好的解释。我使用 Vuejs3 和 Pinia

我的商店：

import {defineStore} from 'pinia'
import {useRoute} from "vue-router";


type navigationState = {
    selectedNavigationItem: INavigationItem | null,
    selectedNavigationPage: INavigationPage | null,
}

export const useNavigationStore = defineStore('navigationStore', {
    state: () => ({
        /**
         * when the user clicks on an element of the navbar we store the navigation item here
         */
        selectedNavigationItem: null,
        /**
         * when the user clicks on an element of the sidebar we store the navigation page here
         */
        selectedNavigationPage: null,
    } as …

我要实施以下流程：

当http请求正在进行时，显示加载程序。请求完成后，隐藏加载程序。

我正在尝试使用 Vue.js做这个 svelte 示例todo 移动动画。

您可以在下面找到我到目前为止所做的工作。只需点击待办事项即可查看。

new Vue({
  el: "#app",
  data: {
    items: [
    	{ id: 1, name: 'John', done: false },
      { id: 2, name: 'Jane', done: false },
      { id: 3, name: 'Jade', done: true },
      { id: 4, name: 'George', done: true },
    ]
  },
  
  computed: {
  	done () {
    	return this.items.filter(i => i.done)
    },
    
    undone () {
    	return this.items.filter(i => !i.done)
    }
  },
  
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})

body …

我试图在子组件中动态加载图像，但图像没有加载。

这是我尝试过的：

基本的 :src="imagePath" 未加载

require 不再可用，因此不起作用

import( ../${imagePath}) 返回一个未定义的 Promise

这是我的代码：

父组件

<script setup lang="ts">
import TheProject from './utils/TheProject.vue';


const projects = [
  {
    idProject: 1,
    title: "title",
    desc: "desc",
    imagePath: "../path/..",
    cardColor: "C4F6DE"
  },
]

</script>

<template>
      <div v-for="project in projects">
        <TheProject :idProject="project.idProject" :title="project.title" 
        :desc="project.desc" :imagePath="project.imagePath" :cardColor="project.cardColor" />
  </div>
</template>

子组件

<script setup lang="ts">

import { onMounted } from 'vue';

const props = defineProps({
    idProject: Number,
    title: String,
    desc: String,
    imagePath: String,
    cardColor: String
})

</script>

<template> …