在 vuex 操作中没有从有效负载中获取价值答案

【问题标题】：Not getting value from payload in vuex actions在 vuex 操作中没有从有效负载中获取价值
【发布时间】：2017-08-02 10:29:02
【问题描述】：

我使用 vuex 进行状态管理这是我的 store.js 文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export const store = new Vuex.Store({
state: {
    loggedIn : false
},
getters: {},
mutations: {
    m_logInUser: state => {
        state.loggedIn = true;
    }
},
actions: {
    a_logInUser : ({commit}, user) => {
            alert(user.e);
            commit('m_logInUser');
    },
    a_signUpUser : ({commit}) => {
            commit('m_logInUser');
    }
}
});

这是我用来改变状态的组件

<template>
<div class="container">
<div class="row">
    <div class="form_bg center-block">
        <form @submit.prevent="a_logInUser({e: email, value:100})">
            <br/>
            <div class="form-group">
                <input v-model="email" type="email" class="form-control" placeholder="Your Email">
            </div>
               <div class="align-center">
            <button type="submit" class="btn btn-success center-block">Log in</button>
                </div>
        </form>
    </div>
</div>

<script>
import { mapActions } from 'vuex'
export default{
    data(){
        return{
            email: ' '
        };
    },
    computed: {
            ...mapActions([
                'a_logInUser'
            ])
    }
}
</script>

但问题是当我按下登录按钮以显示显示在电子邮件中输入的值的警报时，我变得未定义

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

您应该在methods 中使用mapActions，而不是computed

【讨论】：

我在计算中这样做是因为我希望仅在电子邮件值发生变化时才执行操作
将计算更改为方法，现在它可以工作了，但你能解释一下为什么不计算
因为它是一个计算属性，而不是一个方法。
你不能调用/执行一个属性。
vuex文档中有表单处理的解释：vuex.vuejs.org/en/forms.html