O que é vuex
Vuex é um plug-in utilizado para gerir a comunicação entre componentes. É um modo de gestão de estados especialmente desenvolvido para aplicações [vue.js]. Resolve o problema de partilha do mesmo estado entre componentes. Pode comunicar melhor entre componentes. Externo status de gerenciamento.
O que é Vuex?
Vuex é um modo de gerenciamento de estado desenvolvido especificamente para aplicativos vue.js. Ele resolve o problema de compartilhar o mesmo estado entre os componentes. Como ele usa o estado de todos os componentes de um aplicativo de gerenciamento de armazenamento centralizado, os componentes podem se comunicar com a loja. Na verdade, Vuex é um plug-in usado para gerenciar a comunicação entre componentes
Por que eu preciso do Vuex?
Quando vários componentes dependem do mesmo estado, o método de transmissão de parâmetros se torna complicado devido ao aninhamento de vários níveis. Além disso, se você usar componentes pai e filho para fazer referência direta ou usar eventos para alterar e sincronizar várias cópias do estado, o modo vai mudar. Para ser frágil, de modo que o código não pode ser mantido. Portanto, precisamos usar o Vuex para resolver esse problema.
Vuex tem cinco núcleos
Estado todos os dados são armazenados no estado. O estado é um objeto.
As mutações podem manipular diretamente os dados no estado. As ações
só podem chamar o método de mutações. Os
getters são semelhantes aos atributos de cálculo para implementar algumas operações lógicas nos dados do estado valor.
Módulos dividem o armazém em armazenamento modular
Quando usar o Vuex?
O Vuex pode nos ajudar a gerenciar o estado compartilhado e vem com mais conceitos e estruturas. Isso requer um equilíbrio entre benefícios de curto e longo prazo.
Se você não planeja desenvolver aplicativos grandes de uma única página, usar o Vuex pode ser entediante e redundante. Se você deseja criá-lo de forma simples, é melhor não usar o Vuex. Um modo de armazenamento simples é suficiente. No entanto, se você precisa construir um aplicativo de página única médio e grande, provavelmente considerará como gerenciar melhor o estado fora do componente, e o Vuex se tornará uma escolha natural.
O Vuex é geralmente usado para gerenciar o estado do aplicativo em aplicativos de página única da Web de médio e grande porte. Para alguns aplicativos pequenos com relacionamentos mais simples entre os componentes, não é necessário usar o vuex, porque você pode usar as propriedades ou eventos do componente prop para completar o pai e o filho. Para a comunicação entre componentes, o vuex é mais usado para resolver a comunicação entre componentes e como um centro de dados para armazenamento centralizado de dados.
Use vuex para resolver problemas de comunicação entre componentes
A comunicação entre componentes geralmente se refere à comunicação entre os componentes não pai e filho. A comunicação entre os componentes pai e filho geralmente pode ser feita das seguintes maneiras:
1. Passe os dados do componente pai para o componente filho por meio do atributo prop
2 Passe dados para o componente pai disparando um evento no componente filho
A comunicação entre os componentes não pai e filho geralmente usa uma instância vazia do Vue como uma estação de retransmissão, que também pode ser chamada de centro de eventos ou barramento de eventos.
// 创建事件中心实例
let bus = new Vue()
// 在组件 A 中触发事件
bus.$emit('test', 1)
// 在组件 B 中接受事件
bus.$on('test', (id) => {
// ...
})
O método de barramento de eventos é adequado para o acionamento simples de eventos entre componentes. Para cenários mais complexos, como aninhamento de componentes de vários níveis, o vuex pode lidar melhor com isso. A Vuex realiza a comunicação entre os componentes usando o estado como um centro de dados e compartilhando o estado entre os componentes. Neste momento, os dados são completamente independentes dos componentes. Portanto, colocar os dados compartilhados entre os componentes no estado pode resolver efetivamente o componente cruzado aninhamento de componentes multinível Problema de comunicação.
Vuex como um centro de armazenamento de dados
O próprio Estado da Vuex tem uma função de "banco de dados" no desenvolvimento de aplicativos de página única, podendo armazenar os dados usados no componente no Estado e encapsular a lógica de leitura e escrita dos dados na Ação. Nesse momento, surge a dúvida, geralmente que tipo de dados serão colocados no Estado? No momento, existem principalmente dois tipos de dados que serão gerenciados pela vuex:
1. Dados compartilhados globalmente entre os componentes
2. Dados solicitados de forma assíncrona por meio do back-end
No processo de desenvolvimento do projeto real, minha equipe aplica principalmente o segundo tipo, ou seja, incorpora os dados solicitados de forma assíncrona por meio do back-end no gerenciamento de estado do vuex e encapsula a lógica de adicionar, excluir, modificar e verificar os dados no Action , que pode ser usado até certo ponto. O código lógico do front-end é dividido em camadas acima, de modo que o código no componente preste mais atenção à lógica da camada de visualização, como interação de página e renderização de dados, enquanto o a solicitação assíncrona e a persistência dos dados de estado são gerenciadas pela vuex.
A seguir está uma demonstração que usa vuex para gerenciar dados do usuário:
// Stateconst state = {
userInfo: {
}
}
// Mutaionconst mutations = {
UPDATE_USER_INFO (state, payload) {
state.userInfo = payload
}
}
// Actionexport const fetchUserInfo = async ({commit}) => {
// ... 请求用户数据
// 调用 Mutaion 写入用户数据
commit('UPDATE_USER_INFO', userInfo)
}
// Component// 在组件中引入 Action
...mapAction({
fetchUserInfoAction: `fetchUserInfo`
})
// 在 method 中调用 Action
let res = self.fetchUserInfoAction()
Para resumir onde a aplicação específica de vuex depende da escala do projeto e do cenário de negócios específico, pode ser para resolver o problema de comunicação entre componentes aninhados de várias camadas ou para gerenciar melhor os relacionamentos de estado intrincados no aplicativo, mas não para usar .vuex e usar vuex no projeto.