Ошибка TypeError: Невозможно прочитать свойство 'dispatch' из неопределенного в app.js: 12012 - PullRequest
Новая
       26

Ошибка TypeError: Невозможно прочитать свойство 'dispatch' из неопределенного в app.js: 12012

0 голосов
/ 25 мая 2018

Привет. Я пытался изучить vuejs и vuex, пытаясь получить ответ от вызова API с концепцией vuex. Я получил следующую ошибку. Пожалуйста, помогите.Произошла эта ошибка
Ошибка TypeError: Невозможно прочитать свойство 'dispatch' undefined в 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>

1 Ответ

0 голосов
/ 25 мая 2018

Если вы вызываете действия вручную (как в вашем try / catch), они не получат контекст хранилища в качестве первого аргумента.Вы могли бы использовать getUsersList(this.store) Я думаю , но вместо этого я бы использовал диспетчеризацию для выполнения всех ваших действий.(Я немного отредактировал, чтобы получить минимальный пример выполнения, но я думаю, что вы поняли!) 

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
        ...
...