Vuex to Pinia. How to Migrate an Existing App
From Author:
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.
This talk has been presented at Vue.js London 2023, check out the latest edition of this Tech Conference.
FAQ
Pinia is the officially recognized state management library for Vue.js, designed to work with the Composition API. It simplifies state management by eliminating mutations and supports Vue.js versions 2 and 3 with the same installation, making it the default recommendation over Vuex.
Pinia offers a simpler API compared to Vuex as it removes the need for mutations, which were often seen as verbose and complex. Pinia uses actions instead of mutations, streamlining the state management process.
Yes, Pinia can coexist with Vuex in a project, allowing gradual migration. For Vue.js 3 or 2.7, you can directly install Pinia, while Vue.js 2.6 requires the Vue Composition API plugin as well.
Migrating from Vuex to Pinia involves creating a new store using `defineStore` in Pinia, removing mutations and modules, and adjusting your components to use Pinia's store methods. Vuex and Pinia can coexist during migration, allowing for incremental updates.
To test Pinia stores and components, you can use `createTestingPinia` which allows for mocking actions and overriding getters in tests. This setup helps in unit testing store and components separately while ensuring the components behave as expected.
Pinia provides several benefits including simpler API, built-in TypeScript support, dynamic store creation by default, and compatibility with both Vue.js 2 and 3. Its design allows for easier and more efficient state management within Vue.js applications.
For Vue.js 3 and version 2.7, Pinia works directly after installation. However, for Vue.js 2.6, you also need to install the Vue Composition API plugin to ensure compatibility.
Pinia enhances TypeScript support by eliminating the need for custom wrappers and providing better integration. Stores in Pinia are defined either as functions or as objects, which aligns well with TypeScript's features, improving auto-completion and reducing complexity.
Video Transcription
1. Introduction to Pinia
Pinia is the officially recognized state management library for Vue.js. It has a simpler API than VueX, no need for mutations, and supports TypeScript without complex wrappers. Pina can co-exist with Vuex.
Hi there, are you ready to migrate your projects from UX to Pinia? Well, let's start together.
Hi, I'm Danny, I'm from Italy. I'm a full stack developer working with Python and JavaScript, and of course, Vue.js. And I work for Fingerprint as a front-end developer.
So, let's start with talking about Pinia. What is Pinia? Well, Pinia is the officially recognized state management library for Vue.js. Pinia started as an experiment to redesign what a store for Vue.js could look like with composition API. And of course, they tried to implement ideas and many things from core team discussion for VueX5. And then they saw that it was already there. So why applying again, the same changes to Vuex in order to create VueX5, when PNIA was already there. So let's give PNIA and make it the default recommendation now.
So before starting to migrate everything, let's check a quick comparison between VueX and PNIA. Of course, PNIA works with Vue.js 2 and 3 with the same version installed. So you don't need to install, for example, VueX 3 for Vue.js 2 and VueX 4 for Vue.js 3. You just need to install the latest PNIA available. And of course it works. And apart from these, it has a simpler API than VueX because mutations no longer exist. They were often perceived as extremely verbose. And again, with magic strings to inject and so on, they were a little bit difficult to use. So no need for mutations now, just actions, but we will see in a moment. And then you don't need to create custom complex wrappers to support TypeScript because, of course, it's, again, always implemented as a function or as an object. So it's perfect with auto-completion and so on. So no more magic strings to inject, import functions, import methods and properties, call them, and enjoy the completion. And you don't need to dynamically add stores because they are all dynamic by default. It's great. For the same reason, you don't need to nest modules and you don't need to create a nested structure for your store because they are kind of namespaced, you can say. And you can use a store inside another and it works. Just great.
So let's start by installing Pina. Pina can co-exist with Vuex, so you can install them together.
2. Migrating to Pinia and Vuex Store Structure
If you are using Vue.js 3 or 2.7, you can just install Pina. If you are using Vue.js 2.6, you need to install Vue composition API. To create the root store, import create Pina and use it in your application. For an advanced root store, create an index.js file in the stores directory. Define at least one store using the provided syntax. Remember to return properties, getters, and actions at the bottom of the function. To use the store in components, import store2refs or the exported use store. For Vue.js 2, import mapState and mapActions. Now, let's prepare the migration by examining the Vuex store structure.
If you are using Vue.js 3 or 2.7, you can just install Pina. That's it, but if you are using Vue.js 2.6, you need to install also Vue composition API because Pina works with composition API. Then you can find a root store in a basic way. So just importing create Pina and using it in your application. Or if you're using Vue.js 2.x, you need to import also Pina Vue plugin and use the plugin before creating Pina. But if you want to create the root store in an advanced way, you need to create an index.js file in the stores directory, importing create Pina and creating the store. Kind of the same for Vue.js 2.x. And then in your main.js file, you can import your Pina from stores and use it in your application. So, everything Pina related will remain in the stores folder.
Then after defining the root store, let's call it the Pina instance, you need to define at least a store if you want to use a store. So, this is the syntax for Vue.js 3.x and 2.x as well. So, you need to define the store passing the name of the store as first parameter, and it needs to be unique between stores. And as second parameter, you need to pass the state, that is a function returning an object. And then getters and actions, of course no mutations, actions of course, no mutations, but actions changing the store state using just this. You can use a composition API syntax as well. It's kind of the same as the set up script, but the important thing to remember is that you need to return properties, getters, and actions at the bottom of the function, otherwise it won't work. But if you remember this, you can just define your reactive properties, computed and functions, and it works. It's really great.
Now in order to use the store in your components, you need to import store2refs. Store2refs if you want to use the syntax here, or just importing the store, your exported use store, then declaring the store. And from now on you can directly use the store, accessing state actions and getters from here. Or if you want to use reactive getters and properties in an easy way with variables, you can define them using a computed syntax like this or as I mentioned a couple seconds before, you can use store2refs in order to expand them in variables in a single line. No need for store2refs for actions because they are simple functions. So you can call them without the reactivity. For Vue.js 2, you need to import mapState and mapActions kind of similar to Vuex and of course, you store and then you can mapState and mapActions for wrapping state getters in mapState and actions, mapActions, of course. And you can use strings like we were doing in Vuex in Vuex or you can map them in this way.
So now it's time to migrate everything from Vuex to Binia. But before that, we need to prepare the migration in order to have everything sorted and everything ready to go. So let's take a look at the Vuex store structure. We have the store with index.js containing Vuex initialization, Imports modules, and the main store and other modules.
Check out more articles and videos
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Workshops on related topic
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
1. Welcome to Postman- Explaining the Postman User Interface (UI)2. Workspace and Collections Collaboration- Understanding Workspaces and their role in collaboration- Exploring the concept of Collections for organizing and executing API requests3. Introduction to API Testing- Covering the basics of API testing and its significance4. Variable Management- Managing environment, global, and collection variables- Utilizing scripting snippets for dynamic data5. Building Testing Workflows- Creating effective testing workflows for comprehensive testing- Utilizing the Collection Runner for test execution- Introduction to Postbot for automated testing6. Advanced Testing- Contract Testing for ensuring API contracts- Using Mock Servers for effective testing- Maximizing productivity with Collection/Workspace templates- Integration Testing and Regression Testing strategies7. Automation with Postman- Leveraging the Postman CLI for automation- Scheduled Runs for regular testing- Integrating Postman into CI/CD pipelines8. Performance Testing- Demonstrating performance testing capabilities (showing the desktop client)- Synchronizing tests with VS Code for streamlined development9. Exploring Advanced Features - Working with Multiple Protocols: GraphQL, gRPC, and more
Join us for this workshop to unlock the full potential of Postman for API testing, streamline your testing processes, and enhance the quality and reliability of your software. Whether you're a beginner or an experienced tester, this workshop will equip you with the skills needed to excel in API testing with Postman.
Workshop level: Intermediate
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Comments