Создание кода мутации и действий в Vuex

Question

Я пытался понять и действия в Vuex / Vuejs

Из теории, я получил это

1. Состояние может быть изменено только из мутации, из документов Vuex

Единственный способ действительно изменить состояние в хранилище Vuex - это совершить мутацию.

Мутации для синхронного и асинхронного для асинхронного

Отсюда, вероятно, означает, что действие должно вызвать мутацию, чтобы изменить состояние

Надеждамои предположения о том же самом верны, я пытался создать свое первое приложение, используя Vuex.

В этом приложении у меня есть несколько состояний, например, одно для userDetails, EventbriteDetails, MeetupDetails

Я написал этот код для моих EventbriteDetails

import axiosHelper from "./../../helperFunctions/axios.js"

const state = {
    eventbriteProfileData: null,
    eventbriteProfileLoading: null,
    eventbriteProfileError: null,  
}


const mutations = {
    SET_EVENTBRITE_DATA_LOADING: (state) => {
        state.eventbriteProfileLoading = true
    },
    SET_EVENTBRITE_DATA: (state, payload) => {
        state.eventbriteProfileData = payload,
        state.eventbriteProfileLoading = false,
        state.eventbriteProfileError = false
    },
    SET_EVENTBRITE_ERROR: (state) => {
        state.eventbriteProfileLoading = false,
        state.eventbriteProfileError = false
    }
}

const actions = {
     EVENTBRITE_PROFILE:  async (context, url) => {
        context.commit('SET_EVENTBRITE_DATA_LOADING')
       try {
        let {data} = axiosHelper.makeAxiosGetRequest(url)
        context.commit('SET_EVENTBRITE_DATA', data)
       }
       catch {
        context.commit('SET_EVENTBRITE_ERROR')
       }
     }
}


const getters = {
    GET_EVENTBRITE_DATA: state => {
        return state
    }
}


export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
  };

И что-то подобное для userDetails, MeetupDetails, EventbriteDetails , а затем в моем index.js

Я сделал что-то подобное

import Vue from 'vue'
import Vuex from 'vuex'
import User from "./user/userState.js"
import Eventbrite from './eventbrite/eventbriteState.js'
import Meetup from "./meetup/meetupState.js"
Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      User,
      Eventbrite,
      Meetup
    }
  })

  return Store
}

Из приведенного выше фрагмента кода, может кто-топодскажите пожалуйста

1. Правильно ли приведенный фрагмент кода?и если нет, как я могу это исправить?

2. В редуксе мы использовали ... состояние , чтобы отслеживать предыдущее состояние, но здесь мы изменяем наше состояние напрямую, поэтому нам не нужноdo ... state ?(короче, нужно ли нам создавать копию состояния в Vuex. Если да, то почему? и если нет, то почему? и если это субъективно, то как решить?)

Answer 1

1. Ваш код выглядит правильно.Вы добавляете магазин в экземпляр Vue?Пожалуйста, дайте нам больше подробностей, если у вас возникли какие-либо ошибки.

2. В Vue вы просто меняете желаемое состояние.Когда вы создаете переменные внутри data, Vue внутренне создает методы получения и установки, которые будут обрабатывать операции с каждой переменной.Вы можете увидеть геттеры и сеттеры, напечатав в консоли свой экземпляр vue.