如何解决Vuex:未知操作类型:
我对如何在Vuex中调度动作有疑问。
现在,我正在制作一个应用程序并使用Vuex。
我想从 Login.vue 的 store / user.js 中调度vuex 登录操作,但是它不起作用。我想让你给我有小费吗。
现在是应用程序的目录结构。
enter image description here
可能包含问题的文件在这里:
index.js
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user'
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
user
}
})
export default store;
user.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios'
Vue.use(Vuex);
const user = new Vuex.Store({
state: {
current: null,name: 'John'
},mutations: {
setCurrent(state,payload) {
state.current = payload
}
},actions: {
signin({commit},{name,password}) {
axios.$post('http://localhost:3000/login',password})
.then((response) => {
commit('setCurrent',response.data)
})
},signout({commit}) {
commit('setCurrent',null)
}
}
})
export default user;
Login.vue
<template>
<v-container>
<v-card>
<v-card-title>
Login
</v-card-title>
<v-card-text>
<v-form>
<v-text-field
v-model="name"
:counter="10"
label="name"
required
></v-text-field>
<v-text-field
v-model="password"
:counter="10"
label="password"
required
></v-text-field>
<v-btn
class="mr-4"
@click="submitLoginDatas()"
>
Login
</v-btn>
</v-form>
</v-card-text>
</v-card>
{{ getName }}
<v-row class="button">
<v-col>
<v-btn
style="margin-top: 4px;"
to="/signup"
>
Signup
</v-btn>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data() {
return {
name: '',password: ''
}
},methods: {
async submitLoginDatas() {
console.log('HI')
console.log(this.$store.state.user.name)
// ここまでは呼ばれてる
// store自体も登録できている(下のgetNameから確認できる)
await this.$store.dispatch("signin",{
name: this.name,password: this.password
}
)
}
},computed: {
getName() {
return this.$store.state.user.name
}
}
}
</script>
我现在检查的内容
・ typo ... ex。这样表达动作为动作
・ namespace ...现在我不在user.js中表示 namespaced:true ,但在 user.js 中尝试了 namespaced:true 与下面的代码。但这没用。
this.$store.dispatch("user/signin",{
name: this.name,password: this.password
})
・ user.js是否在index.js中正确注册
...在Login.vue中计算出的... getName()正在工作,所以也许还可以。
・是否将动作和突变写为对象而不是功能
...也许是正确的。
感谢您的阅读。我的问题是此错误的原因
[vuex] unknown action type: signin
正在发生,以及如何解决它。
解决方法
您正在尝试在另一个Vuex中使用Vuex-这将无法正常工作。您的Vuex模块应该导出一个普通对象,而不是Vuex实例。请更改modules/user.js
为
import axios from 'axios'
export default {
state(): {
return {
current: null,name: 'John'
}
},mutations: {
setCurrent(state,payload) {
state.current = payload
}
},actions: {
signin({commit},{name,password}) {
axios.$post('http://localhost:3000/login',password})
.then((response) => {
commit('setCurrent',response.data)
})
},signout({commit}) {
commit('setCurrent',null)
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。