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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const store = new Vuex.Store({
  state: {
    // существующие свойства состояния
    count: 0,
    todos: [],
    // новое свойство состояния
    user: null,
  },
  // дальнейшее определение модулей, мутаций, действий и т.д.
})

 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
 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
 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')
    },
  },
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// В компоненте:

import { mapState } from 'vuex'

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

1
2
3
4
5
6
7

<template>
  <div>
    <h1>Welcome, {{ user.name }}</h1>
    <p>Email: {{ user.email }}</p>
    <button @click="updateUser">Update User</button>
  </div>
</template>