javascript - vue.js : error unknown action type?

Question

我创建了我的商店 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 Action ，但我收到一个错误，即使这个 Action 被定义了:

unknown action type: AUTH,

我对问题没有任何想法。

索引.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
  }
})

Answer 1

您需要使用createNamespacedHelpers:

import { createNamespacedHelpers } from 'vuex'

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

Binding helpers with namespace

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

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

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

Nuxt

您正在混合使用经典模式和模块模式。使用模块模式时，Nuxt 从 index.js 文件创建商店实例。您只需导出状态、 setter/getter 、突变和 Action 。状态应作为函数导出:

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

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

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

users 模块在其他方面看起来是正确的。

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

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

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