Migração do Vuex 0.6.x para 1.0

Vuex 2.0 foi lançado, mas este guia só cobre a migração para a versão 1.0? É um mero erro de digitação? Aliás, parece que Vuex 1.0 e 2.0 foram lançados simultaneamente! O que está acontecendo? Qual dos dois devo usar e qual deles é compatível com Vue 2.0?

Tanto Vuex 1.0 quanto 2.0:

Entretanto, eles tem públicos-alvo significativamente diferentes:

Vuex 2.0 é uma reconstrução radical incluindo simplificação da API, para aqueles que estiverem iniciando novos projetos ou queiram ficar na vanguarda do gerenciamento de estado client-side. Ele não é coberto por este guia de migração, então você deve verificar a documentação do Vuex 2.0 se estiver interessado em aprender mais sobre.

Vuex 1.0 é majoritariamente retro-compatível, exigindo poucas mudanças para a migração. É recomendado para aqueles com grande base de códigos-fonte ou que desejam uma migração suave em pequenos passos antes do Vue 2.0. Este guia é dedicado a facilitar o processo, mas só inclui notas de migração. Para o guia de uso completo, visite a documentação do Vuex 1.0.

store.watch com Propriedade String substituído

store.watch agora aceita apenas funções. Por exemplo, você teria que substituir:

store.watch('user.notifications', callback)

por:

store.watch(
// Quando o resultado retornado muda...
function (state) {
return state.user.notifications
},
// Executa este callback
callback
)

Isto oferece controle mais completo sobre propriedades reativas que você quer de observar.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de store.watch com Strings em seu primeiro parâmetro.

Emissão de Eventos no Store removido

A instância do store não expõe mais a interface de emissão de eventos (on, off, emit). Se você esteve usando o store como um global event bus, veja esta seção para instruções de migração.

Em vez de usar esta interface para observar eventos emitidos pelo próprio store (por exemplo, store.on('mutation', callback)), um novo método store.subscribe foi introduzido. O cenário de uso típico dentro de um plugin seria:

const myPlugin = store => {
store.subscribe(function (mutation, state) {
// Faça algo...
})
}

Veja o exemplo na documentação de plugins para mais informações.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de store.on, store.off e store.emit.

Middlewares substituídos

Middlewares foram substituídos por plugins. Um plugin é uma função que recebe o store como seu único argumento, podendo então se subscrever ao evento de mutação ocorrida nele:

const myPlugin = store => {
store.subscribe('mutation', function (mutation, state) {
// Faça algo...
})
}

Para mais detalhes, veja a documentação de plugins.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos onde foi feita a utilização de middlewares em um store.