Vue.js Live Conference

Vue.js London 2023

Pinia is the officially recognized state management library for Vue.js, with a simpler API than VueX and TypeScript support. Migrating to Pinia involves creating a root store, defining stores, and using store2refs or the exported use store in components. Testing real store behavior requires creating a Pinia instance, while component testing involves importing useStore and using mapState and mapAction from vigname. Migrating tests involves creating a local view and using the Pinia plugin, and Vuex and Pinia can coexist but should be migrated module by module. Store persistence can be achieved through subscribing to store changes or using a watcher.

Are you losing your mind trying to convert your Vuex store to Pinia? Here is a walkthrough on how to migrate store definitions and tests, easily and without suffering.

Vuex to Pinia. How to Migrate an Existing App

Denny Biasiolli

JS Nation

JSNation 2022

This workshop covers an introduction to Vue 3 and project overview, setting up the project and exploring the content, Vue 3 features and directives, project bootstrapping with Vue CLI options, project generation and setup, loading data and displaying products, using reactive objects and Axios, extracting data loading logic, adding Vuex store and loading data, hook usage and displaying product page, connecting with store and displaying product view, and building and deploying the project to Netlify.

In modern Vue we have plenty of options how to create and share state across multiple components. In this workshop we will write an application using all the approaches - Vuex, composition API hooks and Pinia.

Managing state in Vue3 application

Mikhail Kuznetsov

Vue.js London Live 2021

Vanessa introduces Vue Free and discusses the benefits of using the Composition API. The order of execution and grouping logical units using the Composition API is explained. The Composition API is used for state management and refactoring components. The speaker shares their initial experience with state management using Vuex. Composables are explored as an alternative for state management in Vue 3.

The Vue 3 Reactivity and Composition API offers developers flexible techniques to work with reactive data. They enable a new and modern approach to handling State Management. Developers can now effortlessly implement local and global stores. Vuex has been one of the most used First-party plugins for Vue 2. Let's have a look at the advantages and tradeoffs of using Composables instead of Vuex. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Modern State Management with Vue 3

Vanessa Otto

The Talk discusses the process of structuring a massive UX store using modules in Vue.js. It covers topics such as namespaces, triggering mutations, and improving store usage with map mutations. The importance of refactoring the folder structure and using separate files for actions, getters, and mutations is highlighted. The Talk concludes by mentioning the possibility of adding additional layers for splitting mutations and providing contact information for further inquiries.

Dive deeply into the architecture of our massive Vuex store. This solution will always be easy to scale, read, and maintain no matter how huge your app is. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Structuring A Massive Vuex Store

Domagoj Vidovic

This Talk introduces state management in Vue, focusing on the Xstate library for managing state machines in UI components. The bottom-up approach in component development can lead to complexity and challenges over time. Xstate is a JavaScript and TypeScript library designed specifically for managing state machines and state charts for UI components. The Talk provides examples of creating a toggle component using Xstate and emphasizes the advantages of using Xstate, such as code reuse, precise testing, and easy maintenance. The speaker encourages developers to plan ahead and consider state, component, and feature design to write better code.

UI components are built on user flows or state graphs. To manage these states, we usually resolved to boolean variables system like isLoading. But this proves to be buggy and hard to maintain as the codebase grows. There is a better solution. In my talk, we will explore how we can fully control our app's states and develop a more adaptive UI system to users' behavior while keeping the codebase scalable with state machines, in real time. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#vuex