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动作，但是即使定义了该动作，也遇到错误：

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
  }
})

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文件创建商店实例。您只需导出状态，获取器，变异和动作。状态应作为函数导出：

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)
    }
}

vue.js：错误未知的操作类型？

1 个答案: