Error TypeError: Cannot read property 'dispatch' of undefined at app.js:12012
Error TypeError: Cannot read property 'dispatch' of undefined at app.js:12012
嗨,我一直在尝试学习 vuejs 和 vuex,同时尝试从使用 vuex 概念的 api 调用中获得响应,我得到了以下 error.Please 帮助。
发生此错误
错误类型错误:无法读取未定义的 属性 'dispatch'
在 app.js:12012
loginAction.js
export const getUsersList = function (store) {
let url = '/Apis/allUsers';
Vue.http.get(url).then((response) => {
store.dispatch('GET_USER_RES', response.data);
if (response.status == 200) {
}
}).catch((response) => {
console.log('Error', response)
})
}
loginStore.js
const state = {
userResponse: []
}
const mutations = {
GET_USER_RES (state, userResponse) {
state.userResponse = userResponse;
}
}
export default {
state, mutations
}
login.vue
import {getUsersList} from './loginAction';
export default {
created () {
try{
getUsersList();
}catch(e){
console.log(e);
}
},
vuex: {
getters: {
getUsersList: state => state.userResponse
},
actions: {
getUsersList
}
}
}
</ script>
如果您手动调用这些操作(例如在您的 try/catch 中),它们将不会将商店上下文作为第一个参数。您可以使用 getUsersList(this.store)
我认为 ,但我会使用 dispatch 来实现您的所有操作。 (我只是编辑了一点点以获得最小的 运行 示例,但我认为你明白了!)
new Vue({
render: h => h(App),
created() {
this.$store.dispatch('getUsersList');
},
store: new Vuex.Store({
getters: {
getUsersList: state => state.userResponse
},
actions: {
getUsersList
}
})
}).$mount("#app");
此外,使用 commit
而不是 dispatch
来实现突变。即:
export const getUsersList = function ({commit}) {
let url = '/Apis/allUsers';
Vue.http.get(url).then((response) => {
commit('GET_USER_RES', response.data); // because GET_USER_RES is a mutation
...
嗨,我一直在尝试学习 vuejs 和 vuex,同时尝试从使用 vuex 概念的 api 调用中获得响应,我得到了以下 error.Please 帮助。
发生此错误
错误类型错误:无法读取未定义的 属性 'dispatch'
在 app.js:12012
loginAction.js
export const getUsersList = function (store) {
let url = '/Apis/allUsers';
Vue.http.get(url).then((response) => {
store.dispatch('GET_USER_RES', response.data);
if (response.status == 200) {
}
}).catch((response) => {
console.log('Error', response)
})
}
loginStore.js
const state = {
userResponse: []
}
const mutations = {
GET_USER_RES (state, userResponse) {
state.userResponse = userResponse;
}
}
export default {
state, mutations
}
login.vue
import {getUsersList} from './loginAction';
export default {
created () {
try{
getUsersList();
}catch(e){
console.log(e);
}
},
vuex: {
getters: {
getUsersList: state => state.userResponse
},
actions: {
getUsersList
}
}
}
</ script>
如果您手动调用这些操作(例如在您的 try/catch 中),它们将不会将商店上下文作为第一个参数。您可以使用 getUsersList(this.store)
我认为 ,但我会使用 dispatch 来实现您的所有操作。 (我只是编辑了一点点以获得最小的 运行 示例,但我认为你明白了!)
new Vue({
render: h => h(App),
created() {
this.$store.dispatch('getUsersList');
},
store: new Vuex.Store({
getters: {
getUsersList: state => state.userResponse
},
actions: {
getUsersList
}
})
}).$mount("#app");
此外,使用 commit
而不是 dispatch
来实现突变。即:
export const getUsersList = function ({commit}) {
let url = '/Apis/allUsers';
Vue.http.get(url).then((response) => {
commit('GET_USER_RES', response.data); // because GET_USER_RES is a mutation
...