时间戳

首页 > 解决方案 > vue.js：错误未知动作类型？

javascript - vue.js：错误未知动作类型？

问题描述

我创建了我的商店 store/user.js

export const state = () => ({
      user: {},
    });
export const mutations = {

};
export const actions = {
  AUTH ({commit},{email, password}){
console.log('email, password =', email, password)
  }
};

export const getters = {};

零件：

<template>
<form @submit.prevent="AUTH(model)">
  <input type="text"  required v-model.lazy = "model.email">
    <input type="password" required v-model.lazy = "model.password" >
</template>


<script>
  import { mapActions } from 'vuex'

  export default {

    data() {
      return {
        model:{
          email:" " ,
          password:" "

      }

      }
    },
    methods: {
      ...mapActions(['AUTH']),
}
}

在我的组件中，我试图从模块执行 vuex 操作，但我收到错误，即使定义了此操作：

unknown action type: AUTH,

我对问题一无所知。

index.js

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

import user from './modules/user.js'

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    user
  }
})

标签： javascriptvue.jsnuxt.js

解决方案

您需要使用createNamespacedHelpers：

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('users')

使用命名空间绑定助手

否则，映射助手需要完整的模块命名空间：

...mapActions([
  'users/AUTH'
])

// if you are only using one module in the component
...mapActions('users', [
  'AUTH'
])

纽斯特

您正在混合经典模式和模块模式。使用模块模式时，Nuxt 从index.js文件中创建存储实例。您只需导出状态、getter、突变和操作。状态应作为函数导出：

export const state = () => ({
  foo: 0,
  bar: 1
})

目录中的任何文件都store将被视为一个模块，Nuxt 会自动将其注册为命名空间模块。

- store
-- index.js // the store
-- users.js // module 'users'
-- foo.js // module 'foo'

用户模块看起来是正确的。

对您的组件进行以下更改：

// template
<form @submit.prevent="submitForm">

// script
methods: {
    ...mapActions({
         auth: 'users/AUTH'
    }),
    submitForm () {
        this.auth(this.model)
    }
}

推荐阅读