vuex 相关问题

文本字段只有整数值

有没有办法只在文本字段中输入整数值？ 我会将输入类型设置为整数，但 vuejs 不支持它。 有没有办法只在文本字段中输入整数值？ 我会将输入类型设置为整数，但 vuejs 不支持它。 <v-text-field label="Regular" type="number" ></v-text-field> 你必须使用 vue 内部指令 v-model.number <input v-model.number="age" type="number">

谁能解决这个问题

警告 在“vue”中找不到导出“默认”（导入为“Vue”）（可能的导出：BaseTransition、Comment、EffectScope、Fragment、KeepAlive、ReactiveEffect、S ...

我无法通过npm安装vuex

$ npm 安装 vuex --保存 错误！代码 ERESOLVE 错误！ ERESOLVE 无法解析依赖树 错误！ 错误！解析时：undefined@undefined 错误！发现：[email protected] 错误！

如何使用 vuex 存储值使组件可见，在父组件中使用 mapstate 和函数

在游戏组件中，我必须组件：Memory 和 NamesByPictures。 可见性由 Vuex 存储参数的 v-if 依赖项设置。 当玩家进入一品脱时，它会被检查，当它被...

使用 TypeScript 在 Vue.js 3 中输入的道具

我正在尝试使用组合 API 在 Vue 3 组件中键入提示我的道具。 所以，我正在这样做： 从“@/interfaces/FlashInterface”导入 FlashInterface； 进口...</desc> <question vote="45"> <p>我正在尝试使用组合 API 在 Vue 3 组件中键入提示我的道具。</p> <p>所以，我这样做：</p> <pre><code>&lt;script lang=&#34;ts&#34;&gt; import FlashInterface from &#39;@/interfaces/FlashInterface&#39;; import { ref } from &#39;vue&#39;; import { useStore } from &#39;vuex&#39;; export default { props: { message: { type: FlashInterface, required: true } }, setup(props): Record&lt;string, unknown&gt; { // Stuff } }; </code></pre> <p>我的<pre><code>FlashInterface</code></pre>长这样：</p> <pre><code>export default interface FlashInterface { level: string, message: string, id?: string } </code></pre> <p>此界面运行良好，但在这种情况下出现此错误：</p> <pre><code>ERROR in src/components/Flash.vue:20:10 TS2693: &#39;FlashInterface&#39; only refers to a type, but is being used as a value here. 18 | props: { 19 | message: { &gt; 20 | type: FlashInterface, | ^^^^^^^^^^^^^^ 21 | required: true 22 | } 23 | }, </code></pre> <p>我不明白为什么 TypeScript 认为这是一个值。</p> <p>我错过了什么？</p> </question> <answer tick="false" vote="83"> <p>您应该将它与从 vue 导入的 <pre><code>PropType</code></pre> 一起使用，例如 <pre><code>Object as PropType&lt;FlashInterface&gt;</code></pre>:</p> <pre><code>import FlashInterface from &#39;@/interfaces/FlashInterface&#39;; import { ref,PropType, defineComponent } from &#39;vue&#39;; import { useStore } from &#39;vuex&#39;; export default defineComponent({ props: { message: { type: Object as PropType&lt;FlashInterface&gt;, required: true } }, setup(props) { // Stuff } }); </code></pre> <p><strong>注意：</strong>您应该使用<pre><code>defineComponent</code></pre>创建您的组件以获得类型推断。</p> <p><strong>脚本设置</strong></p> <p>您可以使用 <pre><code>defineProps</code></pre> 函数以两种方式定义道具，但您应该按照 <a href="https://vuejs.org/guide/typescript/composition-api.html#typing-component-props" rel="noreferrer">here</a> 所述在脚本设置中声明类型/接口：</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import { ref,PropType, defineComponent , defineProps} from &#39;vue&#39;; interface FlashInterface { level: string, message: string, id?: string } interface IProps{ message : FlashInterface } const props = defineProps&lt;IProps&gt;() </code></pre> <p>或</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; ... interface FlashInterface { level: string, message: string, id?: string } const props = defineProps({ message: { type: Object as PropType&lt;FlashInterface&gt;, required: true } }) </code></pre> </answer> <answer tick="false" vote="4"> <p>编译器抱怨在 <a href="https://v2.vuejs.org/v2/guide/components-props.html#Type-Checks" rel="nofollow noreferrer">类型检查期间缺少对（自定义）构造函数的引用</a>（链接到遗留文档，但与最新版本的 Vue 的工作方式相同）。</p> <p>在 Typescript 中，您可能希望将接口视为实体应遵守的契约，因此它们并不是真正的构造函数，因此，我们需要提供这些接口的<strong>实现</strong>。</p> <p>由于你在 Typescript 上，如果你需要保留接口，请考虑使用等效的类：</p> <pre><code>// Name the constructor whatever you like, // but I would personally prefix interfaces with an &#34;I&#34; // to distinguish them with the constructors class Flash implements FlashInterface { level: string; message: string; id?: string constructor() { // Be sure to initialize the values for non-nullable props this.level = &#39;&#39;; this.message = &#39;&#39;; } } export default { name: &#39;Home&#39;, props: { message: Flash } } </code></pre> <p>文档摘录：</p> <blockquote> <p>此外，<pre><code>type</code></pre>也可以是自定义构造函数，断言将通过<pre><code>instanceof</code></pre>检查进行。例如，假设存在以下构造函数：</p> </blockquote> <pre><code>props: { message: { type: function Person(firstName, lastName) { this.firstName = firstName this.lastName = lastName } } } </code></pre> <p>当然，另一种选择是在另一篇文章中用<pre><code>PropType</code></pre>建议的。两者都行。我想这只是一个偏好问题。</p> </answer> <answer tick="false" vote="4"> <h2>双线</h2> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import FlashInterface from &#39;@/interfaces/FlashInterface&#39;; defineProps&lt;{flash: FlashInterface;}&gt;(); &lt;/script&gt; </code></pre> </answer> <answer tick="false" vote="1"> <p>我们应该为开发人员手动创建的接口使用“vue”中的 PropType 并定义默认值！</p> <pre><code>import FlashInterface from &#39;@/interfaces/FlashInterface&#39;; import { ref,PropType, defineComponent } from &#39;vue&#39;; import { useStore } from &#39;vuex&#39;; export default defineComponent({ props: { message: { type: Object as PropType&lt;FlashInterface&gt;, default: {} } }, // stuff }); </code></pre> </answer> <answer tick="false" vote="1"> <p>您可以使用设置脚本来定义您的道具</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import { ref } from &#39;vue&#39;; import { useStore } from &#39;vuex&#39;; interface FlashInterface { level: string, message: string, id?: string } interface Props{ message:FlashInterface } const props = defineProps&lt;Props&gt;() </code></pre> <p>更多信息： <a href="https://vuejs.org/guide/typescript/composition-api.html#typing-component-props" rel="nofollow noreferrer">Vue 文档</a></p> </answer> <answer tick="false" vote="0"> <p>我有一个想法通过引入一个通用的道具类型和一个强制正确实施道具的功能来解决这个问题。</p> <pre><code>type TypedProps&lt;T&gt; = { [key in keyof T]: { type: PropType&lt;T[key]&gt; required?: boolean } | PropType&lt;T[key]&gt; } function typedProps&lt;T extends object&gt;(props: TypedProps&lt;T&gt;): TypedProps&lt;T&gt; { return props } </code></pre> <p>我会像这样在<pre><code>defineComponents</code></pre>中使用它</p> <pre><code>interface MyProps { prop1: string prop2: CustomInterface } export default defineComponent({ props: typedProps&lt;MyProps&gt;({ prop1: String, prop2: Object as PropType&lt;CustomInterface&gt; }) }) </code></pre> <p>虽然，它不能按预期使用 <pre><code>required</code></pre> 键。也许有人可以解释原因或提出更正。</p> </answer> <answer tick="false" vote="0"> <p><pre><code>Object as PropType</code></pre> 给我的印象是时髦且几乎难以记住的语法。一种更好的输入属性的方法是在 defineProps 调用中内联一个泛型类型参数，因此，使用 <pre><code>&lt;script setup lang=&#34;ts&#34;&gt;</code></pre>...</p> <pre><code>const props = defineProps&lt;{ message: FlashInterface }&gt;() </code></pre> </answer> </body></html>

来自商店的 vue 数组在组件中不可用（及时）

在我的应用程序中，我有一组游戏卡，存储在 vuex 商店中。 玩家填写一个游戏图钉，代码对其进行检查，并获取该图钉的游戏卡并将它们存储在商店中并打开...

为什么在 Jest 单元测试中尝试创建 Vuex 存储的克隆时出现类型错误？

我有一个工作的 Vue 2.6 / Vuex 3.6 / TypeScript 应用程序。我想在进行一些复杂的重构之前向它添加一些单元测试。一旦我安装并确认了 Jest 和 Vue Test Utils...

未渲染的组件

**我想知道为什么不渲染组件。虽然控制台没有显示任何典型错误。 https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Form.vue** **我想知道为什么不渲染组件。虽然控制台没有显示任何典型错误。 https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Form.vue** <template> <form> <KeepAlive> <component :is="currentStep" /> </KeepAlive> </form> </template> <script> export default { data() { return {}; }, props: ["currentStep"], methods: {}, }; </script> 因为你在currentStep还没有通过Form到App.vue 请修复以下问题，它将起作用： 从currentStep中删除methodsApp.vue 添加computedcurrentStep到App.vue： ... computed: { currentStep() { return this.steps[this.stepIndex] } } ... 在currentStep中添加道具Form到App.vue： ... <Form ... :current-step="currentStep" /> ... 您还应该考虑 vue 3 或 sfc 的新语法 避免使用provide你的代码崩溃切换到props 您应该在currentStep组件中将<Form />作为道具传递，而不是使用计算属性动态传递组件名称的方法。 computed: { currentStep() { return this.steps[this.stepIndex]; }, } 现场演示：codesandbox

当我试图在当前位置导航时，如何强制 Vue Router 重新加载我的页面？

其实我有这样的项目。 观点 首页.vue 课堂.vue App.vue 在 Home.vue 中，我有我的内容和登录表单。基本上，如果你还没有连接，你有提交......

为什么 v-on:change 不起作用但 v-on:input 在 vuexy 模板中有效？

在 vuexy 模板中，为什么在 v-select v-on:change 中不起作用？这里 loadSelectedSourceLeads 从 api 返回一个数组并且工作正常。 在 vuexy 模板中，为什么在 v-select v-on:change 中不起作用？这里 loadSelectedSourceLeads 从 api 返回一个数组并正常工作。 <b-col cols="2"> <v-select v-model="filterSourceId" :options="filterSourceIdOption" v-on:change="loadSelectedSourceLeads" :reduce="(source) => source.id" label="name" placeholder="Filter By Source" /> </b-col> <script> methods: { loadSelectedSourceLeads(a) { console.log(a); }, } </script> 但是当我使用 v-on:input 时，它会工作并返回选定的源 ID。 <b-col cols="2"> <v-select v-model="filterSourceId" :options="filterSourceIdOption" v-on:input="loadSelectedSourceLeads" :reduce="(source) => source.id" label="name" placeholder="Filter By Source" /> </b-col> <script> methods: { loadSelectedSourceLeads(a) { console.log(a); }, } </script> v-模型 = :value + @input; 这是v-select组件的实现造成的 内部应该触发了input事件，但是没有触发change事件

自定义验证表单vue

**如何在 Button 组件中创建表单的自定义验证？我需要检查是否所有字段都已完成 - 显示单个组件，如果没有 - 显示自定义警报。我想...

如何在单个模型对象上使用 VuexORM WithAll

我已经查看了文档并且能够调用 withAllRecursive 来检索模型对象的关系，例如 Model.query().withAllRecursive().first(); 然而，而不是检索“第一&

为什么在本地更改 Vuex 存储对象的深层副本会导致该更改应用于 Vuex 存储？

在我下面的代码中，我首先尝试从 Vuex 商店复制一些数据，以便在将它发送到后端之前更改一些小东西，而不更改商店本身的数据。我用

从后端推送数组到 vuex 存储不工作

错误：创建的钩子错误（承诺/异步）：“TypeError：state.push 不是函数” TypeError: state.push 不是函数 页面中的方法 创建：异步函数（）{ this.$store.

显示以首字母开头的元素 Vue 2

我只想显示以字母开头的元素我点击我的 ... 我只想显示以字母 thtt 开头的元素，我点击我的 <template> <div> <div class="d-flex px-2 pt-5 flex-wrap justify-center"> <router-link class="mx-1 router-text" :to="{ name: 'byLetter', params: { letter } }" v-for="letter in letters" :key="letter"> {{ letter }} </router-link> </div> <div> <v-row> <v-col v-for="beer in beers" :key="beer.id" cols="6"> <v-card class="d-flex flex-column justify-space-between"height="200"> <h2 class="ml-3 mt-3"> {{ beer.name }} <v-avatar> <v-img :src="beer.image_url" alt="John"></v-img> </v-avatar> </h2> <div class="px-5 d-flex text-center align-center justify-space-between"> <p>Volume: {{ beer.abv }}%</p> <p class="px-7 food">Food pairing: <br />{{ beer.food_pairing }}</p> <router-link class="router" :to="{ name: 'details', params: beer }"> <v-btn outlined> <v-icon>mdi-magnify</v-icon> Szczegóły </v-btn> </router-link> </div> </v-card> </v-col> </v-row> </div> </div> </template> <script> // Imports import axiosClient from '@/axiosClient' export default { data() { const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('') return { letter: this.$route.params.letter, beers: [], letters, } }, created() { axiosClient.get(`beers?beer_name=${this.letter}`).then(response => { this.beers = response.data console.log(this.beers) }) }, computed: { filteredBeers: function () { return this.beers.filter(beer => { return beer.name.startsWith(`${this.letter}`) }) }, }, } </script> 我尝试添加 startrsWith() 但它仍然显示所有包含不以该字母开头的字母的元素。也许我必须使用一些功能？我不知道。请帮忙 我该怎么做才能在我点击字母后自动刷新？ 在你的v-for中，你迭代beers，而不是filteredBeers

vuexORM hasMany/belongsTo 关系返回 null

我相信我已经正确地遵循了文档。 我有 2 个模型 Author 和 Book s.t. Author hasMany Book 和 Book belongsTo Author。 author_id 存在于书籍中，但关联为空。我们...

如何在新的 Nuxt 3 项目中安装 Vuex？

我需要有人帮助我解释如何在 Nuxt 3 应用程序中安装 Vuex。 当我使用这个命令 npx nuxi init 安装 Nuxt 3 时，我有一个新的 Nuxt 3 应用程序，但是当我想在 Nuxt 中使用 Vuex 时，我不能

未捕获错误。找不到模块'.stage.js'。

在这里，我在laravel 6项目中设置了vue和vuetify来创建一个crud表，但由于某些原因，我无法将vueX导入到我的vue组件中。错误：在.resourcesjsstore中出现错误。ERROR in .resourcesjsstore...

状态更新后UI不反应不重新渲染

我构建了以下简单的UI。在点击垃圾桶图标时，由于状态发生了变化，所以应该删除书签，更新UI。调用API，我在开发工具中可以看到， ...

vuex状态下应该初始化哪种类型的数据，什么时候初始化？

我开始学习vuex，我一直在问我这个问题，我应该从商店设置这些数据还是应该在组件上加载？例如，在我的应用中，我加载了所有用户（firebase）......