Vue.js/Vuex 登录：[vuex] 未知操作类型：postLogin。

Posted 2023-02-23

【中文标题】Vue.js/Vuex 登录：[vuex] 未知操作类型：postLogin。

【英文标题】：Vue.js/Vuex Login: [vuex] unknown action type: postLogin.

【发布时间】：2019-03-13 13:13:42

【问题描述】：

我对 Vuejs 相当陌生，但对 Vuex 更是如此——我了解 Vue 和 Vuex 的基础知识。我正在努力让我的登录工作。这是我得到的错误：

[vuex] unknown action type: postLogin. 

我想成功点击api。我已经在后端创建了用户（使用 django）。所以我可以通过管理门户登录。尝试通过 apis/axios 使用 vue 前端登录。

这里有我的 component.vue 代码：

             <v-card-text>
               <v-form @submit.prevent="postLogin(email, password)">
                 <v-text-field v-model="email" prepend-icon="person" name="login" label="Login" type="text"></v-text-field>
                 <v-text-field v-model="password" prepend-icon="lock" name="password" label="Password" id="password" type="password"></v-text-field>
                 <v-card-actions>
                   <v-spacer></v-spacer>
                   <v-btn type ='submit' color="primary">Login</v-btn>
                 </v-card-actions>
               </v-form>
             </v-card-text>

这是我的 auth.js 存储操作：

const actions = 
  postLogin (context, payload) 
    return axios.post('/api/users/login/', payload)
      .then(response => )
      .catch(e => 
        context.commit('setAuthError', true)
        console.log(e)
      )
  ,

这是我尝试调用该操作的组件脚本：

<script>
import postLogin from '@/store/modules/auth'

  export default 
    data: () => (
      drawer: null,
      email: '',
      password: ''
    ),
    props: 
      source: String
    ,
    methods: 
      postLogin (email,password) 
        this.$store
          .dispatch('postLogin', email, password).then(()=> this.$router.push(name: 'dashboard'))
      
    
  
</script>

我已经尝试了一切，请帮助我。

【问题讨论】：

现在发生了什么，你真正想要发生什么？

这是我得到的错误：[vuex] unknown action type: postLogin.我想成功命中api。我已经在后端创建了用户（使用 django）。所以我可以通过管理门户登录。尝试通过 apis/axios 使用 vue 前端登录。

请分享您的商店代码

调度调用和操作似乎是正确的（除了你的逻辑），所以我觉得你没有正确设置 Vuex。

@boussadjrabrahim 我的商店代码在 auth.js 下的问题中。

【参考方案1】：

您的vuex 似乎正在使用模块。如果您使用它们设置namespacing（即，您在模块中声明namespaced: true），那么您的action 不再位于全局命名空间中。您必须调整您的代码以发送到auth/postLogin：

this.$store .dispatch('auth/postLogin', email, password) .then(() => this.$router.push(name: 'dashboard'));

假设当您将此命名空间模块注册到您的root 存储区时，上述内容将起作用，您还将其命名为auth。如果您将其命名为其他名称，则必须相应地调整您的 dispatch() 调用：

// inside your src/store/index.js
import auth from './modules/auth';

...
const store = new Vuex.Store(
  ...
  modules: 
    auth,        // <-- call dispatch('auth/postLogin', email, password)
    auth: auth,  // <-- call dispatch('auth/postLogin', email, password)
    authen: auth // <-- call dispatch('authen/postLogin', email, password)
  
);

【讨论】：

非常感谢！事实证明，我有一个 index.js 和一个 store.js，这在应用程序中造成了歧义。

@WernerKotze 我明白了。很高兴你把它整理出来。 :)