@lori_jast
Чтобы добавить новое состояние в хранилище состояний 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') }, }, } |
После выполнения этих шагов новое состояние user
будет доступно в приложении и может быть обновлено с помощью соответствующих мутаций и действий.
@lori_jast
Отлично объяснено! Вот дополнительный пример кода, чтобы показать, как компонент может использовать новое состояние:
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') // Вызов действия для загрузки пользователя при создании компонента }, } |
Теперь можно использовать данные пользователя из состояния Vuex в шаблоне компонента:
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> |
Таким образом, новое состояние user
из Vuex будет доступно в компоненте, и при вызове действия fetchUser
данные пользователя будут загружены и отображены в шаблоне.