javascript - vue.js : error unknown action type? - Stack Overflow

admin管理员组

文章数量:1345388

I created my store store/user.js

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

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

export const getters = {};

ponent:

<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']),
}
}

In my ponent , I am trying to execute a vuex action from a module, but I am getting an error, even if this action is defined :

unknown action type: AUTH,

I don't have any idey about problem.

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

I created my store store/user.js

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

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

export const getters = {};

ponent:

<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']),
}
}

In my ponent , I am trying to execute a vuex action from a module, but I am getting an error, even if this action is defined :

unknown action type: AUTH,

I don't have any idey about problem.

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

• javascript
• vue.js
• nuxt.js

Share Follow edited Jul 20, 2018 at 2:07 Лена Фролова asked Jul 20, 2018 at 1:58 Лена ФроловаЛена Фролова 9911 gold badge33 silver badges1313 bronze badges 6

• Can you provide your code which creates the store? Are you using vuex modules? – Decade Moon Commented Jul 20, 2018 at 2:01
• Because you're using modules, it'll be namespaced. See this answer. – Decade Moon Commented Jul 20, 2018 at 2:06
• [nuxt] store/index.js should export a method which returns a Vuex instance. i get err – Лена Фролова Commented Jul 20, 2018 at 2:09
• When using modules mode in Nuxt, you don't create the store yourself. Instead, export the state, getters, mutations and actions. – Brian Lee Commented Jul 20, 2018 at 2:12
• i use nuxt . how to do it nuxt? – Лена Фролова Commented Jul 20, 2018 at 2:12

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 9

You need to use createNamespacedHelpers:

import { createNamespacedHelpers } from 'vuex'

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

Binding helpers with namespace

Otherwise, the mapping helpers need the full module namespace:

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

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

Nuxt

You're mixing classic and modules mode. When using modules mode, Nuxt creates the store instance from the index.js file. You simply export the state, getters, mutations and actions. State should be exported as a function:

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

Any file within the store directory will be considered a module and Nuxt will automatically register it as a namespaced module.

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

The users module looks otherwise correct.

Make the following changes to your ponent:

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

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

本文标签： javascriptvuejserror unknown action typeStack Overflow