Gerenciando State com- Vuex Guia Vue.js Abrangente e Exemplos do Mundo Real

Vuex é uma state biblioteca de gerenciamento para Vue.js aplicativos, permitindo que você gerencie e sincronize dados em diferentes component programas em seu aplicativo. Vuex implementa a arquitetura Flux, tornando fácil e eficiente o gerenciamento da aplicação state.

 

Conceitos-chave Vuex incluem

1. State

O state in Vuex representa o armazenamento de dados centralizado para seu aplicativo. Ele contém os dados do aplicativo que precisam ser compartilhados entre diferentes component computadores. Aqui está um exemplo de definição de um state in Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: {  
    count: 0,  
    todos: []  
  }  
});

 

2. Mutations

Mutations são responsáveis ​​por modificar o state in Vuex. São funções síncronas que recebem a corrente state e o payload como argumentos. Aqui está um exemplo de definição de uma mutação em Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {  
    increment(state) {
      state.count++;  
    },  
    decrement(state) {
      state.count--;  
    }  
  }  
});

 

3. Actions

Actions são usados ​​para lidar com operações assíncronas e despachar mutations para modificar o arquivo state. Eles podem conter chamadas de API, tarefas assíncronas ou lógica complexa. Aqui está um exemplo de definição de uma ação em Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: { /* mutations definition */ },
  actions: {  
    async fetchData({ commit }) {  
      const response = await fetch('https://api.example.com/data');  
      const data = await response.json();  
      commit('updateData', data);  
    }  
  }  
});

 

4. Getters

Getters permitem que você recupere e calcule derivados state da Vuex loja. Eles são úteis para acessar e manipular dados antes de devolvê-los ao component s. Aqui está um exemplo de definição de um getter em Vuex:

// Vuex store  
const store = new Vuex.Store({
  state: { todos: [...] },
  getters: {  
    completedTodos(state) {  
      return state.todos.filter(todo => todo.completed);  
    },  
    todoCount(state) {  
      return state.todos.length;  
    }  
  }  
});

 

Para instalar Vuex em seu Vue.js projeto, você pode seguir estes passos

Passo 1: Instale Vuex via npm ou yarn:

npm install vuex

ou

yarn add vuex

Passo 2: Crie um store.js  arquivo no diretório raiz do seu projeto. É aqui que declararemos e gerenciaremos o aplicativo state.

Passo 3: No store.js  arquivo, importe Vuex e crie um novo objeto store:

import Vue from 'vue';  
import Vuex from 'vuex';  
  
Vue.use(Vuex);  
  
const store = new Vuex.Store({  
  // Declare your states, getters, mutations, and actions here  
});  
  
export default store;

Etapa 4: No main.js  arquivo, importe a loja e vincule-a ao seu aplicativo Vue:

import Vue from 'vue';  
import App from './App.vue';  
import store from './store';  
  
new Vue({  
  store,  
  render: h => h(App),  
}).$mount('#app');

Passo 5: Agora você instalou e configurou Vuex em seu projeto. Você pode declarar seus state s, getters, mutations e actions no store.js arquivo e usá-los em seus Vue component s.

Exemplo:

No store.js  arquivo, você pode declarar um simples state e uma mutação como esta:

const store = new Vuex.Store({
  state: {  
    count: 0  
  },  
  mutations: {  
    increment(state) {
      state.count++;  
    }  
  }  
});

Em um Vue component, você pode usar a state mutação e usando as  funções  e: mapState mapMutations

import { mapState, mapMutations } from 'vuex';  
  
export default {  
  computed: {  
    ...mapState(['count'])  
  },  
  methods: {  
    ...mapMutations(['increment'])  
  }  
};

Com essas etapas, você instalou com sucesso Vuex e pode usá-lo para gerenciar o state do seu Vue.js aplicativo.

 

Com Vuex, você pode gerenciar o aplicativo de forma fácil e consistente state. Ele aprimora a capacidade de manutenção e reutilização do código, ao mesmo tempo em que fornece uma abordagem estruturada para o gerenciamento de dados.