State Management in Vue3 Using the Composition API and Pinia (2)

The search filters in the Talent Pool service consist of 17 items such as experience, region, job role, education, and salary, so state and data changes were very frequent. Managing this with a single component would have increased complexity, so child components for each item were placed under a parent Filter, and the common filter data was managed with Pinia.

The store was defined using the setup store approach, which fits well with the Composition API. conditions was kept as a ref, getFilters was exposed as a computed, and actions like updateFilters and resetFilters were separated out, allowing each component to read and write the same state.

For individual components like the experience filter, the store state was retrieved with storeToRefs and two-way bound using v-model. When a user changed a condition, the common state in the store changed, and that change was detected via deep watching in the watch on the results list screen, triggering a search API re-call.

Thanks to this approach, different components could share the same filter state while keeping the flow of state changes and list updates simple. The advantages of a state management library were clearly evident on screens dealing with complex nested data.

In a survey based on hands-on experience, the majority of engineers had little difficulty adapting to Vue3, and a high proportion said the Composition API was better than the Options API. Pinia was often rated as easier and more intuitive than Vuex, but the inability to use TypeScript, the burden of the initial Vue3 learning curve, and code styles mixing Composition API and Options API were pointed out as areas for improvement.

Personally, since I had only worked with Vue2-based services before, this was my first project applying Vue3, and I felt that Pinia's function-based structure and intuitive code fit better for collaboration and maintenance. In particular, separating state management from component responsibilities made it easier to grasp the work, and there remains room going forward to work with an even more efficient structure that includes Vue3 features like Teleport.