Vuex — это паттерн управления состоянием и библиотека для приложений на Vue.js. Он служит центральным хранилищем данных для всех компонентов приложения и обеспечивает предсказуемость изменения данных при помощи определённых правил.

Gett­ers

Функции возвращающие значения из store. Используйте их, когда над значениями в store надо произвести какие то действия прежде чем передать их вызвавшему. (Вы так же можете считывать напрямую.)

Muta­tions

Функции которые коммитят изменения в store. Могут быть использованы для пред-обработки значений перед сохранением. Вы так же можете изменять state напрямую

Acti­ons

Функции похожие на мутации. исключая коммиты данных во время асинхронных таксов. Они не являются обязательными, но вы должны привыкнуть использовать их всякий раз, когда присутствуют мутации.

Жизненный цикл Vuex (Life Cycle)

пример использования Getters

<template>
     <div>
        <div>Value = {{ getMyProperty }}</div>
        <div>Value = {{ getStoredProp }}</div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters([
                'getMyProperty'
            ]),
            // or, without helper...
            getStoredProp: () => {
                  return this.$store.getters.getMyProperty;
            }
        }
    }
</script>

пример использования Mutations

<template>
    <div>
        <button @click="setMyProperty(22)">Set to 22</button>
        <button @click="setThatProp(0)">Reset to 0</button>
    </div>
</template>

<script>
    import { mapMutations } from 'vuex';
    export default {
        methods: {
            ...mapMutations([
                'setMyProperty'
            ]),
            // Or without helper...
            setThatProp( value ) {
                this.$store.commit( 'setMyProperty', value );
            }
        }
    }
</script>

пример использования Actions

<template>
    <div>
        <button @click="doChangeMyProperty(5)">Change me to 5</button>
    </div>
</template>

<script>
    import {mapActions} from 'vuex';
    export default {
        methods: {
            ...mapActions([
                'doAsyncChangeMyProperty',
            ]),
            // Or without helper...
            doThatThing( value ) {
                this.$store.dispatch('doAsyncChangeMyProperty', value);
            }
        }
    }
</script>

двусторонний биндинг

<template>
    <div>
        <input type="text" v-model="my_property"/>
        {{ my_property }}
    </div>
</template>

<script>
    export default {
        computed: {
            my_property: {
                get() {
                    return this.$state.getters.my_property;
                },
                set( value ) {
                    this.$state.dispatch('setMyProperty', value);
                }
            }
        }
    }
</script>

On Store Object

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        my_property: 47
    },
    getters: {
        getMyProperty: state => {
            return state.my_property;
        }
    },
    mutations: {
        setMyProperty: ( state, payload ) => {
            state.my_property = payload;
        }
    },
    actions: {
        doChangeMyProperty: ( context, payload ) => {
            context.commit('setMyProperty', payload);
        },
        doAsyncChangeMyProperty: ( { commit }, payload ) => {
            // Using a timeout, but any async operation can go here
            setTimeout(function () {
                commit('setMyProperty', payload);
            }, 1000);

        }
    }
});

On Modules

const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}

const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
}

const store = new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
    }
})


store.state.a // moduleA's state
store.state.b // moduleB's state