Vuex - ... вызов mapActions из шаблона: невозможно прочитать свойство 'dispatch' из неопределенного - PullRequest
Новая
       19

Vuex - ... вызов mapActions из шаблона: невозможно прочитать свойство 'dispatch' из неопределенного

0 голосов
/ 02 октября 2018

Я новичок в Vue, я просто пытаюсь понять, как это работает.Я использую маршрутизатор, и у меня есть родительский и дочерний элемент.В дочернем компоненте у меня есть этот простой HTML-элемент в дочернем компоненте:
<button @click="consoleLog">consoleLog</button>

У магазина в main.js есть это действие: 

export const store = new Vuex.Store({
state: {
    userName: undefined,
    password: undefined,
    authenticated: false
},
mutations: {
    changeUserNameMutation(state, userName) {
        state.userName = userName;
    },
    changePasswordMutation(state, password) {
        state.password = password;
        Vue.axios.defaults.headers['Authorization'] = password;
    },
    changeAuthenticatedMutation(state, isAuthenticated) {
        state.authenticated = isAuthenticated;
    }
},
actions: {
    changeUserName({ commit }, userName) {
        commit('changeUserNameMutation', userName);
    },
    changePassword({ commit }, password) {
        commit('changePasswordMutation', password);
        Vue.axios.defaults.headers['Authorization'] = password;
    },
    changeAuthenticated({ commit }, isAuthenticated) {
        commit('changeAuthenticatedMutation', isAuthenticated);
    },
    consoleLog({ commit }) {
        console.log('sad');
    }
}

Ничего более реальногов main.js только новый вызов Vue, вызовы Vue.use () и импорт.

В дочернем компоненте у меня есть следующие действия: 

methods: {
    changeUserName(userName) {
        store.dispatch('changeUserName', userName);
    },
    changePassword(password) {
        store.dispatch('changePassword', password);
    },
    login() {
        this.axios.get('http://localhost:3050/admin/login')
            .then((data) => {
                console.log(data);
            })
            .catch(() => {
                console.log(data);
            });
    },
    ...mapActions(['consoleLog'])
}

Первые 2диспетчеризация работает, но когда я нажимаю на метод consoleLog, он говорит:
Cannot read property 'dispatch' of undefined at VueComponent.mappedAction

Я пробовал все другие способы вызова ... mapActions (), но у меня как-то не работает таким образом.
(это мой первый день в Vue, я пытаюсь понять, как это работает)

...