Skip to content
← Todas las preguntas
Principiante

¿Cómo funciona Vuex?

Gestión de estado

Vuex sigue el patrón Flux: State → Getters → Mutations → Actions

ts
const store = createStore({
  state: { count: 0 },

  // Getters: valores computados del store
  getters: {
    doubled: (state) => state.count * 2
  },

  // Mutations: ÚNICA forma de mutar el estado (síncronas)
  mutations: {
    INCREMENT(state) { state.count++ },
    SET_COUNT(state, value: number) { state.count = value }
  },

  // Actions: pueden ser asíncronas, llaman a mutations mediante commit
  actions: {
    async fetchCount({ commit }) {
      const response = await fetch('/api/count')
      const data = await response.json()
      commit('SET_COUNT', data.count)
    }
  }
})

// En un componente:
store.state.count
store.getters.doubled
store.commit('INCREMENT')
store.dispatch('fetchCount')

Publicado bajo la licencia MIT.