3.Vuex.md

VueX (oneway-directional):

Vuex в основном используется для Vue и похож на Flux и Redux.

1) Components:

• Store: каждый Vuex имеет глобальное хранилище, в котором содержится состояние приложения. Это состояние - это только те данные, которые должны быть переданы в компонент. Это состояние одно и похоже на Redux, поэтому приложение будет содержать только один экземпляр Store.

Create Store:

const store = new Vuex.Store({
    state: {
        count: 1
    },
});

Add Store to the app:

const app = new Vue({
  el: '#app',
  // Предоставляем объект хранилища для опции «store», которая может внедрить экземпляр хранилища во все дочерние компоненты
  store,
  components: { Counter },
  template: `
    <div class="app">
      <Counter/>
    </div>
  `
});

Usage:

const Counter = {
    template: `<div>{{ count }}</div>`,
    computed: {
        count() {
            return this.$store.state.count // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        }
    }
};

• Getter: иногда может потребоваться вычислять производное состояние на основе состояния хранилища. Same as computed properties in Vue or useMemo in React. It cashing the value and updates it only when some of values (dependencies) that being used inside of it were changed.

Create Store:

const store = new Vuex.Store({
    state: {
        count: 1
    },
    getters: { // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        count: state => {
            return Math.abs(state.count); // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        }
    }
});

Usage:

import { mapGetters } from 'vuex';  // !!!!!!!!!!!!!!!!!!!!!

const Counter = {
    template: `<div>{{ count }}</div>`,
    computed: {
        ...mapGetters({ count }) // !!!!!!!!!!!!!!!!!!!!!
    }
};

• Mutation (synchronous): состояние не может быть изменено напрямую, и ему нужно принять соглашение. Этот метод называется мутацией в Vuex. Единственный способ изменить состояние в хранилище Vuex - это отправить мутацию.

Types:

export const INCREMENT = 'INCREMENT';

Create Store:

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: { // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        [type.INCREMENT](state, payload) {
            state.count++
        }
    }
});

Usage:

    const Counter = {
        template: `
          <div>{{ count }}</div>
          <button @click="$store.commit(type.INCREMENT, payload);"> + 1 </button> // !!!!!!!!!!!!!!!!!!!!!
        `,
        computed: {
          ...mapGetters({ count })
        },
    };

• Action: похожи на мутации с несколькими отличиями:
  • Вместо того, чтобы напрямую менять состояние, действия инициируют мутации;
  • Действия могут использоваться для асинхронных операций

Creation:

const actions = {
    increment({ commit }, payload) {
        commit(type.INCREMENT, payload);
    },
};

Usage:

    import { mapActions } from 'vuex';  // !!!!!!!!!!!!!!!!!!!!!
    const Counter = {
        template: `
          <div>{{ count }}</div>
          <button @click="increment"> + 1 </button> 
        `,
        computed: {
          ...mapGetters({ count })
        },
        methods: {
            ...mapActions({ increment }) // !!!!!!!!!!!!!!!!!!!!!
        },
    };

2) Redux vs Vuex:

Differences:

• Мутация чем-то похожа на Redux Reducer, но Vuex не требует нового состояния каждый раз. Вы можете напрямую изменять состояние.