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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от narciso , 7 месяцев назад

@lori_jast 

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

  1. Определить новое свойство состояния в объекте state в файле store.js:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const store = new Vuex.Store({
  state: {
    // существующие свойства состояния
    count: 0,
    todos: [],
    // новое свойство состояния
    user: null,
  },
  // дальнейшее определение модулей, мутаций, действий и т.д.
})


  1. Создать соответствующую мутацию для обновления нового состояния:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const store = new Vuex.Store({
  state: {
    user: null,
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
  },
})


  1. Создать действие для вызова мутации, если необходимо выполнить асинхронные операции перед обновлением состояния:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
const store = new Vuex.Store({
  state: {
    user: null,
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
  },
  actions: {
    fetchUser({ commit }) {
      // выполнение асинхронной операции
      const user = api.getUser()
      // вызов мутации после получения данных
      commit('setUser', user)
    },
  },
})


  1. Использовать новое состояние в компонентах приложения, используя mapState:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { mapState } from 'vuex'

export default {
  computed: {
    // добавление нового состояния в вычисляемые свойства компонента
    ...mapState(['user']),
  },
  methods: {
    // вызов действия для обновления нового состояния
    updateUser() {
      this.$store.dispatch('fetchUser')
    },
  },
}


После выполнения этих шагов новое состояние user будет доступно в приложении и может быть обновлено с помощью соответствующих мутаций и действий.