Почему данные из action не отправляются в mutation?

Question

[Fierfoxik]

Пересел с react/redux на vue/vuex и возникли проблемы с vuex.

Почему то при dispatch или cmmit из action туда не приходит не один из методов а приходят только передаваемые данные.

Также при dispatch экшена из компонента мы принимаем данные, но данные судя по всему никуда из action не уходят, т.к принимаемые данные в mutation пусты.

store

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import * as mutations from './mutations'

Vue.use(Vuex)

const initialState = {
  settings: JSON.parse(localStorage.getItem('widgetSettings')) || []
};

const inBrowser = typeof window !== 'undefined'

// if in browser, use pre-fetched state injected by SSR
const state = (inBrowser && window.__INITIAL_STATE__) || initialState


export const store = new Vuex.Store({
  state,
  actions,
  mutations,
  getters
})

actions

import {SAVE_WIDGET_SETTINGS} from '../constants'

export const saveSettings = ( data) => {
        console.log(data)
        return {SAVE_WIDGET_SETTINGS, data}
};

mutations

import {SAVE_WIDGET_SETTINGS} from '../constants/index'


export const mutations = {
    SAVE_WIDGET_SETTINGS (state, data) {  state.settings.push(data)}

}

component

<div class="widgetsblock_selectors_grid_col">
	<div class="widgetsblock_selectors_selector">
		<button class="btn btn-secondary btn-sm" v-on:click="submit" type="button">Сохранить</button>
	</div>
</div>
<script>
    import { mapActions } from 'vuex'
    import { mapState } from 'vuex'
    import { saveSettings } from '../../vuex/actions'


    export default {
        name: 'WidgetsOptions',
        data () {
            return {
                checkedNames: []
            }
        },
        mounted: function () {
            this.loadSettings()
        },
        methods: {
            submit: function() {
                localStorage.setItem('widgetSettings', JSON.stringify(this.checkedNames));

                mapActions([(saveSettings(this.checkedNames))]);
            }
        }
    }
</script>

Answer 1

[lavezzi1]

Action такой должен быть:

saveSettings({ commit }, data) => {
        console.log(data)
        commit(SAVE_WIDGET_SETTINGS, data)
};

Comments

[Fierfoxik]

Как я отметил, по какой то причине в экшен не приходит не коммит первым аргументом не диспатч, приходят только данные

[furrya_black]

В экшн всегда приходит инстанс Vue, vm, вторым и далее - payload, укажите vm вместо { commit } и выведите vm в консоль и поймете о чем речь.

[Fierfoxik]

furrya_black:
уже делал приходят просто мои данные

export const saveSettings = (commit , data, example) => {
console.log(commit) //данные
console.log(data)//undefined
console.log(example)//undefined
}

[furrya_black]

https://bitbucket.org/crimson-forever/hufrontend

Вы не лепите стэйт в vue js, как в Ангуляре.
Вон по ссылке пример.

[furrya_black]

Во vue js action не возвращает тип мутации, он коммитит мутацию или/и диспатчит другой экшн

[lavezzi1]

Fierfoxik: Прочитайте доки и не лепите свое: https://vuex.vuejs.org/ru/actions.html

[Fierfoxik]

lavezzi1: я и не леплю свое, mapActions - Диспетчеризация действий в компонентах,
тем самым я просто должен был деспатчить экшн с переданными данными и типом в mutations