相关疑难解决方法(0)

上下文

在Vue 2.0中,文档和其他人清楚地表明,从父母到孩子的沟通是通过道具进行的.

题

父母如何告诉孩子一个事件是通过道具发生的？

我应该只看一个名为事件的道具吗？这感觉不对,也没有替代方案($emit/ $on是孩子到父母,而中心模型是远程元素).

例

我有一个父容器,它需要告诉它的子容器,可以在API上使用某些操作.我需要能够触发功能.

我正在创建一个基本的SPA,但碰巧我用Vuex管理的状态和那里的突变都可以,但是在我想要使用mapState和mapMutations的每个组件中,我必须在本地导入它们.

<script>
    import {mapState,mapMutations  } from 'vuex';
    export default{
        computed : mapState(['isLoggedIn']),
        methods: {
            ...mapMutations(['logout'])
        }
    }
</script>

这是正确的方法吗？或者我如何在全局范围内声明它们并避免在每个组件中导入以使其如下所示？

<script>   

    export default{
        computed : mapState(['isLoggedIn']),
        methods: {
            ...mapMutations(['logout'])
        }
    }
</script>

我有一个登录表格。当我用数据填写登录表单并单击登录按钮时：

• 表单数据（用户名，密码）发送到服务器，并返回响应
• 如果表单数据无效，则<flash-message>组件显示一条消息
• 如果表单数据有效，则将用户重定向到仪表板

由于此组件在很大程度上取决于Vuex存储，因此我无法想到该组件的一些有效测试用例。

• 这个组件可以测试吗？
• 如果它是可检验的，我怎么写开玩笑单元测试？
• 我应该模拟组件的哪一部分？
• 我应该使用vue-test-utils mount / shallowMount方法包装组件吗？
• 我的组件使用Bootstrap-Vue UI组件。我该如何处理？

我没有使用JavaScript生态系统的经验，所以详细的说明将不胜感激。

Login.vue

<template>
  <b-col sm="6" offset-sm="3">
    <h1><span class="fa fa-sign-in"></span> Login</h1>
    <flash-message></flash-message>
    <!-- LOGIN FORM -->
    <div class="form">
        <b-form-group>
            <label>Email</label>
            <input type="text" class="form-control" name="email" v-model="email">
        </b-form-group>

        <b-form-group>
            <label>Password</label>
            <input type="password" class="form-control" name="password" v-model="password">
        </b-form-group>

        <b-btn type="submit" variant="warning" size="lg" @click="login">Login</b-btn>
    </div>

    <hr>

    <p>Need an account? <b-link :to="{name:'signup'}">Signup</b-link></p>
    <p>Or go <b-link :to="{name:'home'}">home</b-link>.</p>
  </b-col>

</template>

<script>
export default {
  data () {
    return {
      email: '', …

我的目标是创建一个“编辑帐户”表格，以便用户可以修改其帐户数据。我想以一种已经填写了用户数据的形式显示帐户数据，即用户名，电子邮件，地址...

然后，用户可以修改表单中的数据并提交此表单，以更新其用户信息。

我正在使用v-model将表单输入绑定到数据中名为accountInfo的对象，如下所示：

data() {
    return {
        accountInfo: {
                firstName: ''
        }
    }
}

这是我模板中表单输入的示例：

<input v-model.trim="accountInfo.firstName" type="text" class="form-control" id="first-name" />

对象中键的值当前为空字符串，但我希望这些值来自名为userProfile的对象，该对象是vuex中的状态属性。

在我的“编辑帐户”组件中，我通过导入来映射vuex状态：

import { mapState } from "vuex";

然后在计算属性中使用以下内容

computed: {
    ...mapState(["userProfile"])
}

我想做的是，不是使用空字符串作为accountInfo的值，而是从从vuex映射的userProfile计算属性中为其分配值，如下所示：

data() {
        return {
            accountInfo: {
                    firstName: this.userProfile.fristName,
            }
        }
    }

这将为我的表单提供所需的初始数据，但是不幸的是，这不起作用，大概是因为数据在生命周期中的呈现时间早于计算出的属性。

完整代码：

EditAccount.vue

<template>
    <div class="container-fluid">
        <form id="sign_up_form" @submit.prevent>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <input v-model.trim="signupForm.firstName" type="text" class="form-control" id="first_name" />
                </div>
            </div>
        </form>
    </div>
</template>

<script>
import { …