Как добавить новое состояние в state в vuex?

Пользователь

от evalyn.barrows , в категории: JavaScript , 8 месяцев назад

Как добавить новое состояние в state в vuex?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от wilburn , 8 месяцев назад

@evalyn.barrows 

Чтобы добавить новое состояние в хранилище (state) Vuex, нужно выполнить следующие шаги:

  1. Определите новое свойство состояния в объекте state. Например, если вы хотите добавить свойство counter, определите его так:
1
2
3
state: {
  counter: 0
}


  1. Создайте мутацию (mutation) для обновления этого состояния. Например, если вы хотите увеличивать счетчик на 1, создайте мутацию incrementCounter:
1
2
3
4
5
mutations: {
  incrementCounter(state) {
    state.counter++
  }
}


  1. Создайте действие (action) для вызова мутации. Например, если вы хотите увеличивать счетчик по кнопке, создайте действие incrementCounterAction:
1
2
3
4
5
actions: {
  incrementCounterAction(context) {
    context.commit('incrementCounter')
  }
}


  1. Используйте геттер (getter) для получения значения счетчика из хранилища. Например, если вы хотите показать значение счетчика в компоненте, создайте геттер counter:
1
2
3
4
5
getters: {
  counter(state) {
    return state.counter
  }
}


Теперь вы можете вызывать действие incrementCounterAction для увеличения счетчика и использовать геттер counter для получения его значения.