Escreva um vuex simples

Aqui está um exemplo simples da Vuex Store:

 
 
import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0,
    message: 'Hello Vuex!'
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    getCount(state) {
      return state.count;
    },
    getMessage(state) {
      return state.message;
    }
  }
});

export default store;

A Loja Vuex neste exemplo contém estado, mutações, ações e getters.

  • state É onde o estado do aplicativo é armazenado e pode ser acessado em componentes.
  • mutations São definidas funções que modificam o estado, recebem um  state objeto como primeiro parâmetro e podem ser  commit acionadas chamando um método.
  • actions Contém operações assíncronas ou mutações em lote, que podem ser  dispatch acionadas pela chamada de métodos.
  • getters Fornece métodos para calcular e acessar dados armazenados no estado, utilizando-os como propriedades.

Você pode modificá-lo e ampliá-lo de acordo com as necessidades do seu negócio. Ao usar o armazenamento em um aplicativo, você pode storeacessar o estado, as mutações, as ações e os getters definidos nele importando objetos.

Acho que você gosta

Origin blog.csdn.net/weixin_55209970/article/details/131963180
Recomendado
Clasificación