Migrando para versão 4.0 da versão 3.x #

Quase todas as APIs do Vuex 4 permaneceram inalteradas desde o Vuex 3. No entanto, ainda existem algumas mudanças importantes que você deve corrigir.

• Alterações Importantes
  • Processo de instalação
  • Suporte ao TypeScript
  • Os pacotes agora estão alinhados com Vue 3
  • A função "createLogger" é exportada do módulo principal
• Novas Características
  • Nova função de composição "useStore"

Alterações Importantes #

Processo de instalação #

Para alinhar com o novo processo de inicialização do Vue 3, o processo de instalação do Vuex mudou. Para criar um novo store, os usuários agora são incentivados a usar a função createStore recém-introduzida.

import { createStore } from 'vuex'

export const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

Para instalar Vuex em uma instância Vue, passe o store em vez do Vuex.

import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'

const app = createApp(App)

app.use(store)

app.mount('#app')

Suporte ao TypeScript #

Vuex 4 remove suas tipagens globais para this.$store dentro de um componente Vue para resolver essa issue #994. Quando usado com TypeScript, você deve declarar seu próprio module augmentation.

Coloque o seguinte código em seu projeto para permitir que this.$store seja tipado corretamente:

// vuex-shim.d.ts

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // Declare seus próprios estados do store
  interface State {
    count: number
  }

  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

Você pode aprender mais na seção Suporte ao TypeScript.

Os pacotes agora estão alinhados com Vue 3 #

Os seguintes pacotes são gerados para se alinhar aos pacotes Vue 3:

• vuex.global(.prod).js
  • Para uso direto com <script src="..."> no navegador. Expõe o Vuex global.
  • A distribuição (ou build) global é construída como IIFE, e não UMD, e destina-se apenas ao uso direto com <script src="...">.
  • Contém branches chumbadas no código (ou hard-coded) de prod/dev e a compilação de prod é pré-minificada. Use os arquivos .prod.js para produção.
• vuex.esm-browser(.prod).js
  • Para uso com importações de módulo ES nativo (incluindo navegadores de suporte de módulo via <script type="module">.
• vuex.esm-bundler.js
  • Para uso com empacotadores como webpack, rollup e parcel.
  • Deixa os branches de prod/dev com os guardas de tipo process.env.NODE_ENV (deve ser substituído pelo empacotador).
  • Não envia distribuições (ou builds) minificados (para ser feito junto com o resto do código após o empacotamento).
• vuex.cjs.js
  • Para uso em renderização do lado do servidor (server-side rendering) no Node.js com require().

A função createLogger é exportada do módulo principal #

No Vuex 3, a função createLogger foi exportada de vuex/dist/logger, mas agora está incluída no pacote principal. A função deve ser importada diretamente do pacote vuex.

import { createLogger } from 'vuex'

Novas Características #

Nova função de composição useStore #

Vuex 4 apresenta uma nova API para interagir com o store na API de composição (ou Composition API). Você pode usar a função de composição useStore para recuperar o store dentro do gatilho (ou hook) setup do componente.

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
  }
}

Você pode aprender mais na seção API de Composição.