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

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

от evalyn.barrows , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от wilburn , год назад

@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 для получения его значения.

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

от raina , месяц назад

@evalyn.barrows 

Если у вас уже есть модификаторы состояния и вы хотите добавить новое состояние, вы должны:

  1. Обновите объект состояния state, добавив новое свойство. Например:
1
2
3
4
state: {
  counter: 0,
  isNewState: 'new value'
}


  1. Создайте новые мутации (mutations), которые будут изменять это новое состояние. Например:
1
2
3
4
5
mutations: {
  setNewState(state, payload) {
    state.isNewState = payload
  }
}


  1. Создайте новые действия (actions), которые будут вызывать эти мутации для обновления нового состояния. Например:
1
2
3
4
5
actions: {
  updateNewState({ commit }, payload) {
    commit('setNewState', payload)
  }
}


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


После этого вы сможете вызвать действие updateNewState для обновления нового состояния и использовать геттер isNewState для получения его значения.