Devo usar Composition API como substituto do VueX?

No framework Vue, na sua atual verso 3, possvel utilizar a API de composio (Composition API) para lidar com possveis cenrios de repetio de cdigo.

As funcionalidades base do framework, como funes para lidar com estado reativo, observar mudanas de estado, definio de componentes, mtodos de ciclo de vida, etc., agora podem ser importadas. Dado isso, podemos declarar explicitamente o que queremos usar do framework. A abordagem um pouco parecida com os "hooks" para quem vem do mundo do React.

Aqui vai um exemplo:

global.js

   import { reactive } from 'vue';   const state = reactive({ count: 0 })   const incrementCount = () => state.count++;   export default { state, incrementCount };

No cdigo acima importada uma funo que vai lidar com a reatividade do objeto, que passado como argumento contento o atributo "count". Dessa forma qualquer alterao no atributo "count", ser reativo, ou seja, qualquer lugar(componente, funo, etc.) que use o "count" receber a atualizao em primeira mo, porque todos os valores dentro do objeto(state) so reativos.

Com alguns novos recursos do Vue tambm possvel implementar funcionalidades parecidas com as da API de contexto do React. possvel agora utilizar provide / inject para trabalhar com estado global (no se limita a isso).

Agora com a nossa loja(store) configurada com o estado e a funo incrementCount() que manipula um valor do estado, necessrio "prover"(provide) esse estado para toda a nossa aplicao Vue.

main.js

import { createApp } from "vue";import global from "@/global";const app = createApp({  provide: {    global  },  ...}

Agora todos os nossos componentes podem ter acesso ao estado e as funes que manipulam o mesmo, mas para isso ser possvel necessrio fazer uma "injeo" do estado global no componente, para isso iremos utilizar o "inject":

MyComponent.vue

<template>  <div>{{ global.state.count }}  <button @click="global.increment">Increment</button></template><script>export default {  inject: ["global"]}</script>

Dessa maneira j temos um estado global simples j implementado, mas a pergunta , substitui VueX? A resposta , depende.

O VueX por ser um projeto, relativamente, grande e que j tem um bom tempo no ecossistema Vue foi pensado e feito somente para lidar com o estado global da aplicao, ele pode (sugervel) ser usado em aplicaes que exijam um estado global mais complexo, e as motivaes so as seguintes:

• VueX conta com a extenso do Vue que facilita bastante a inspeo do estado global, l ele lista as mutations, actions, getters, e o prprio estado global de uma forma mais amigvel, as informaes ficam mais acessveis.

• VueX conta com vrios plugins famosos que podem ser teis em vrios cenrios, como o "vuex-persisted" que persiste o estado global da aplicao no local storage.

Bom, entendendo quais problemas cada soluo veio resolver, agora voc pode escolher qual atende o cenrio do seu projeto.

Referncias:
https://vuejsdevelopers.com/2020/10/05/composition-api-vuex/