Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

С Vuex мы можем хранить состояние нашего приложения Vue в центральном месте.

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

Добавление мутаций

Мы можем добавить мутацию, добавив функцию, которая изменяет состояние, беря его из параметра, а затем изменяя его.

Например, мы можем написать следующий код:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increase(state) {
      state.count++;
    }
  }
});

Затем мы можем запустить функцию мутации, запустив:

store.commit('increase')

Тогда state.count должен увеличиться на 1.

Мы не можем запускать функции мутации напрямую.

Зафиксировать с полезной нагрузкой

Если мы хотим передать ему наш собственный аргумент, мы можем добавить его после параметра state, поэтому мы напишем:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increase(state, num) {
      state.count += num;
    }
  }
});

Затем мы можем зафиксировать мутацию, написав:

store.commit('increase', 10)

Тогда state.count должен увеличиться на 10.

Второй параметр обычно является объектом, поэтому мы можем получить доступ к значениям свойств, написав:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increase(state, payload) {
      state.count += payload.amount;
    }
  }
});

Затем мы можем зафиксировать мутацию, написав:

store.commit('increase', {
  amount: 10
})

Любые изменения состояния будут автоматически отслеживаться компонентами, если они обращаются к store изнутри.

Правила реактивности Vue, такие как инициализация начального состояния и использование Vue.set для обновления объектов и т. Д., Применимы к хранилищам Vuex.

Мы можем заменить строки для имен мутаций константами, назначив их константам.

Например, мы можем изменить приведенный выше пример на:

const INCREASE = "increase";
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    [INCREASE](state, payload) {
      state.count += payload.amount;
    }
  }
});
store.commit(INCREASE, { amount: 10 });

JavaScript, начиная с ES6, может иметь имена динамических свойств, поэтому мы можем воспользоваться этим, чтобы заменить имена константами.

Мутации должны быть синхронными

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

Совершение мутаций в компонентах

Мы можем использовать this.$store.commit для фиксации мутаций или использовать вспомогательные методы Vuex для этого.

this.$store.commit

Например, мы можем использовать this.$store.commit следующим образом:

index.js :

const INCREASE = "increase";
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    [INCREASE](state, payload) {
      state.count += payload.amount;
    }
  }
});
new Vue({
  el: "#app",
  store,
  computed: Vuex.mapState(["count"]),
  methods: {
    increase(amount) {
      this.$store.commit(INCREASE, { amount });
    }
  }
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex"></script>
  </head>
  <body>
    <div id="app">
      <button @click="increase(10)">Increase</button>
      <p>{{count}}</p>
    </div>
    <script src="index.js"></script>
  </body>
</html>

В приведенном выше коде у нас есть метод increase следующим образом:

increase(amount) {
  this.$store.commit(INCREASE, { amount });
}

Это вызывается нашим шаблоном, когда мы нажимаем кнопку «Увеличить».

this.$store.commit(INCREASE, { amount }); увеличит state.count на сумму, которую мы передаем, то есть 10.

Затем мы возвращаем состояние, используя mapState, чтобы мы могли отобразить его в нашем шаблоне.

Когда мы нажимаем «Увеличить», получаем 10, 20, 30 и т. Д.

mapMutations

Мы можем использовать mapMutations для сопоставления мутаций с методами в нашем компоненте следующим образом:

index.js :

const INCREASE = "increase";
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    [INCREASE](state, payload) {
      state.count += payload.amount;
    }
  }
});
new Vue({
  el: "#app",
  store,
  computed: Vuex.mapState(["count"]),
  methods: {
    ...Vuex.mapMutations([INCREASE])
  }
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex"></script>
  </head>
  <body>
    <div id="app">
      <button @click="increase({amount: 10})">Increase</button>
      <p>{{count}}</p>
    </div>
    <script src="index.js"></script>
  </body>
</html>

В приведенном выше коде mapMutations сопоставляет методы мутации с методами компонентов.

So:

...Vuex.mapMutations([INCREASE])

сопоставляет метод increase, добавляет метод increase к компоненту, который вызывает this.$store.commit(INCREASE).

INCREASE - это строка 'increase', которая у нас есть в первой строке.

В шаблоне мы просто вызывали increase({amount: 10}), когда нажимали кнопку "Увеличить" для обновления state.count в магазине.

Заключение

Мы добавляем мутации в наш магазин Vuex, чтобы обновить состояние нашего магазина.

Для этого мы добавляем методы под объект mutations.

Затем мы можем вызвать this.$store.commit или использовать mapMutations для сопоставления методов мутации в магазине с методами компонентов.

Мутации должны быть синхронными, поскольку их нужно отслеживать.