<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Power_Coder</title>
    <description>The latest articles on Forem by Power_Coder (@power_coder).</description>
    <link>https://forem.com/power_coder</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F148252%2F0bbd4dbb-2bdd-406b-ba6b-7a5bd0c1ca24.png</url>
      <title>Forem: Power_Coder</title>
      <link>https://forem.com/power_coder</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/power_coder"/>
    <language>en</language>
    <item>
      <title>Free Certifications for Software Developers</title>
      <dc:creator>Power_Coder</dc:creator>
      <pubDate>Sat, 14 Dec 2024 19:24:54 +0000</pubDate>
      <link>https://forem.com/power_coder/free-certifications-for-software-developers-2kjg</link>
      <guid>https://forem.com/power_coder/free-certifications-for-software-developers-2kjg</guid>
      <description>&lt;h3&gt;
  
  
  &lt;strong&gt;GraphQL&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Certifications:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Apollo GraphQL Certification&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Description:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Apollo GraphQL offers a comprehensive certification program that validates your skills in building, querying, and managing GraphQL APIs. This certification is a great way to demonstrate your expertise in GraphQL and show that you’re prepared to implement it effectively in production applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
GraphQL is a powerful query language for APIs, offering efficiency and flexibility compared to traditional REST APIs. This certification is particularly useful for developers working on modern web and mobile apps.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Programming language:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
JavaScript, TypeScript&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Courses:&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Apollo Odyssey Learning Platform: Free GraphQL courses covering beginner to advanced topics.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Rating:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
4.8/5&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cost:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Free&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Multiple Tries Allowed?:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Yes&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;URLs:&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.apollographql.com/tutorials" rel="noopener noreferrer"&gt;Apollo GraphQL Certification&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What I Did:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
I completed the Apollo Odyssey series, which included hands-on projects like building a GraphQL server and client. The practical exercises and the focus on real-world scenarios made it easy to apply what I learned.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Neo4J&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Certifications:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Neo4j Certified Professional&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Description:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
The Neo4j Certified Professional program is designed to validate your understanding of graph database concepts and your ability to work with Neo4j. It’s ideal for those interested in graph-based data modeling and analysis.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Graph databases like Neo4j are increasingly popular for use cases like recommendation systems, fraud detection, and network analysis. This certification helps you gain credibility in the field.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Programming language:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Cypher (Neo4j Query Language)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Courses:&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://graphacademy.neo4j.com" rel="noopener noreferrer"&gt;Neo4j GraphAcademy&lt;/a&gt;: Free online courses covering Neo4j fundamentals and advanced concepts.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Rating:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
4.7/5&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cost:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Free&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Multiple Tries Allowed?:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Yes&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;URLs:&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://neo4j.com/graphacademy/neo4j-certification/" rel="noopener noreferrer"&gt;Neo4j Certification&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What I Did:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
I took the GraphAcademy’s beginner courses, practiced writing Cypher queries, and explored real-world graph database use cases like social network analysis. Passing the certification boosted my confidence in using Neo4j for complex data relationships.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;CockroachDB&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Certifications:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
CockroachDB Associate Certification&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Description:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
The CockroachDB Associate Certification verifies your knowledge of CockroachDB, a distributed SQL database designed for cloud-native applications. It’s perfect for developers working with scalable, fault-tolerant databases.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
With the growing need for resilient and scalable databases, learning CockroachDB gives you an edge in modern application development, especially for highly available and globally distributed systems.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Programming language:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
SQL&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Courses:&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://www.cockroachlabs.com/cockroach-university/" rel="noopener noreferrer"&gt;Cockroach University&lt;/a&gt;: Free courses covering distributed SQL concepts and CockroachDB basics.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Rating:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
4.9/5&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cost:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Free&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Multiple Tries Allowed?:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Yes&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;URLs:&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.cockroachlabs.com/certification/" rel="noopener noreferrer"&gt;CockroachDB Certification&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What I Did:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
I completed the Cockroach University courses, which included lessons on distributed database principles and hands-on labs. The interactive tutorials helped solidify my understanding of distributed SQL and CockroachDB’s unique architecture.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Free certifications like these not only expand your technical expertise but also help you build a strong professional portfolio. Whether you’re diving into GraphQL, graph databases, or distributed SQL, these programs provide valuable learning opportunities to enhance your career as a software developer.&lt;/p&gt;

</description>
      <category>graphql</category>
      <category>neo4j</category>
      <category>javascript</category>
      <category>database</category>
    </item>
    <item>
      <title>Quick Read of All npm Commands.</title>
      <dc:creator>Power_Coder</dc:creator>
      <pubDate>Thu, 05 Oct 2023 21:00:36 +0000</pubDate>
      <link>https://forem.com/power_coder/quick-read-of-all-npm-commands-3ipd</link>
      <guid>https://forem.com/power_coder/quick-read-of-all-npm-commands-3ipd</guid>
      <description>&lt;br&gt;&lt;br&gt;
        &lt;ul&gt;

            &lt;li&gt;
&lt;code&gt;npm init&lt;/code&gt; - Interactively creates a &lt;code&gt;package.json&lt;/code&gt; file for your project.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm install&lt;/code&gt; - Installs all the dependencies listed in the &lt;code&gt;package.json&lt;/code&gt; file.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm uninstall package-name&lt;/code&gt; - Removes a package from your project.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm update&lt;/code&gt; - Updates the packages listed in your &lt;code&gt;package.json&lt;/code&gt; file to their latest compatible versions.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm search package-name&lt;/code&gt; - Allows you to search for packages in the npm registry.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm list&lt;/code&gt; - Shows a list of installed packages and their versions.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm outdated&lt;/code&gt; - Lists packages that are outdated compared to the latest available versions.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm run script-name&lt;/code&gt; - Executes a script defined in the &lt;code&gt;scripts&lt;/code&gt; section of your &lt;code&gt;package.json&lt;/code&gt; file.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm publish&lt;/code&gt; - Publishes your package to the npm registry if you're the author or maintainer of a package.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm login&lt;/code&gt; - Logs you in to your npm account. Required before publishing a package.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm logout&lt;/code&gt; - Logs you out of your npm account.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm version&lt;/code&gt; - Increments the version number in your &lt;code&gt;package.json&lt;/code&gt; file based on a specified versioning strategy.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm config&lt;/code&gt; - Allows you to view and set npm configuration options.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm cache clean&lt;/code&gt; - Clears the npm cache.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm link&lt;/code&gt; - Creates a symbolic link between a globally installed package and a local package.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm root&lt;/code&gt; - Shows the path to the global or local package installation directory.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm ls&lt;/code&gt; - An alias for &lt;code&gt;npm list&lt;/code&gt;.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm dedupe&lt;/code&gt; - Attempts to reduce the duplication in the installed packages to save disk space.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm audit&lt;/code&gt; - Checks your project for vulnerabilities in its dependencies.&lt;/li&gt;

            &lt;li&gt;
&lt;code&gt;npm doctor&lt;/code&gt; - Helps diagnose common issues with your npm configuration.&lt;/li&gt;

        &lt;/ul&gt;
&lt;br&gt;&lt;br&gt;
    &lt;br&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>website</category>
    </item>
    <item>
      <title>Quick Read to understand `package.json`</title>
      <dc:creator>Power_Coder</dc:creator>
      <pubDate>Thu, 05 Oct 2023 20:49:02 +0000</pubDate>
      <link>https://forem.com/power_coder/quick-read-to-understand-packagejson-f9o</link>
      <guid>https://forem.com/power_coder/quick-read-to-understand-packagejson-f9o</guid>
      <description>&lt;p&gt;Here is a summary of the important fields and their descriptions in a &lt;code&gt;package.json&lt;/code&gt; file:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;name&lt;/strong&gt;: The name of your package. Must be less than or equal to 214 characters and follow specific naming rules. It should be unique if you plan to publish the package.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;version&lt;/strong&gt;: The version of your package. Should follow semantic versioning (server) rules. It is used to track changes to your package over time.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Description&lt;/strong&gt;: A short description of your package. Helps people discover your package in npm search.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;keywords&lt;/strong&gt;: An array of keywords that describe your package. Also helps with package discovery.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;homepage&lt;/strong&gt;: The URL to the project's homepage, usually a GitHub repository or project website.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;bugs&lt;/strong&gt;: The URL to the project's issue tracker or an email address for reporting issues.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;license&lt;/strong&gt;: The license under which your package is distributed. Should use an SPDX license identifier if possible.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;author&lt;/strong&gt;: Information about the author of the package, including name, email, and URL.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;contributors&lt;/strong&gt;: An array of contributors to the package, each with a name, email, and optional URL.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;funding&lt;/strong&gt;: Information about ways to support or fund development, including URLs to donation or funding platforms.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;files&lt;/strong&gt;: An array of file patterns describing the package's contents to be included when installed as a dependency.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;main&lt;/strong&gt;: The main entry point to your package, usually a JavaScript file. If not specified, defaults to "index.js."&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;browser&lt;/strong&gt;: Specifies the browser-compatible version of your module if it's intended for both Node.js and browsers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;bin&lt;/strong&gt;: Maps command names to local files that should be installed as executable commands.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;man&lt;/strong&gt;: Specify files to be used for the man program to find manual pages.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;directories&lt;/strong&gt;: Allows you to indicate the structure of your package, including directories for documentation, lib, and man pages.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;repository&lt;/strong&gt;: The URL or details of the version control repository where your code is hosted.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;scripts&lt;/strong&gt;: A dictionary containing script commands run at various times in the package's lifecycle.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;config&lt;/strong&gt;: Configuration parameters used in package scripts that persist across upgrades.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;dependencies&lt;/strong&gt;: The package's runtime dependencies, with version requirements.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;devDependencies&lt;/strong&gt;: Dependencies used for development, such as testing and build tools.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;peerDependencies&lt;/strong&gt;: Specifies compatibility with host packages or plugins.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;peerDependenciesMeta&lt;/strong&gt;: Provides more information on how peer dependencies are used and marks some as optional.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;bundleDependencies&lt;/strong&gt;: Lists packages that should be bundled when publishing the package.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;optionalDependencies&lt;/strong&gt;: Specifies dependencies that are not required for installation and won't cause installation failures if they can't be installed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;overrides&lt;/strong&gt;: Allows you to override dependencies or their versions in your package's dependency tree.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;engines&lt;/strong&gt;: Specifies the Node.js and npm versions your package is compatible with.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;os&lt;/strong&gt;: Defines the operating systems on which your module can run.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;cpu&lt;/strong&gt;: Specifies the CPU architectures supported by your package.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;private&lt;/strong&gt;: If set to true, prevents the package from being published to the public npm registry.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;publishConfig&lt;/strong&gt;: Configuration values to be used at publish-time, such as registry and tag.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;workspaces&lt;/strong&gt;: An array of file patterns that specify locations of workspaces within the package.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These fields are used to provide information about your package and its dependencies, configure its behavior, and specify how it should be installed and used by others.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>node</category>
    </item>
    <item>
      <title>Vue2 to Vue3 Upgrade.</title>
      <dc:creator>Power_Coder</dc:creator>
      <pubDate>Thu, 05 Oct 2023 01:13:31 +0000</pubDate>
      <link>https://forem.com/power_coder/vue2-to-vue3-upgrade-epa</link>
      <guid>https://forem.com/power_coder/vue2-to-vue3-upgrade-epa</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SlR56uWM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpqjin2rk5v41jqsvcbn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SlR56uWM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpqjin2rk5v41jqsvcbn.png" alt="Vue" width="241" height="209"&gt;&lt;/a&gt;&lt;br&gt;
Upgrading from Vue 2 to Vue 3 involves several code changes and updates, as Vue 3 introduced some significant changes and improvements. Below are the key code changes you'll need to make for a Vue 2 to Vue 3 upgrade:&lt;br&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  -- Vue Composition API:
&lt;/h2&gt;

&lt;p&gt;Vue 3 introduces the Composition API, which allows you to organize your component logic more modularly. You should refactor your components to use the Composition API when appropriate. Here's an example of the Composition API:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rBBFBCCx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79xing3wbl6gatlqpc0k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rBBFBCCx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79xing3wbl6gatlqpc0k.png" alt="vue-composition" width="800" height="964"&gt;&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  -- Props Declaration:
&lt;/h2&gt;

&lt;p&gt;In Vue 3, you should explicitly declare props using the props option:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--oqy47Ufp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l3xpqu7z3bsjm7lg1df.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--oqy47Ufp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l3xpqu7z3bsjm7lg1df.png" alt="props" width="800" height="702"&gt;&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  -- Emitting Events:
&lt;/h2&gt;

&lt;p&gt;In Vue 3, you should use the &lt;code&gt;emit&lt;/code&gt; function to emit custom events instead of $emit:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qOXEXsY9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juehh4q3yglxd84gp1va.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qOXEXsY9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juehh4q3yglxd84gp1va.png" alt="events" width="800" height="475"&gt;&lt;/a&gt;. &lt;br&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  -- Filters:
&lt;/h2&gt;

&lt;p&gt;Vue 3 removed filters. You can achieve similar functionality using methods or computed properties.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jT0e79FY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb00vtinswvi4blic7cr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jT0e79FY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb00vtinswvi4blic7cr.png" alt="filters" width="800" height="780"&gt;&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  -- Updated v-model:
&lt;/h2&gt;

&lt;p&gt;Vue 3 replaces the &lt;code&gt;v-model&lt;/code&gt; directive with v-model custom directives. You'll need to update your components accordingly if using &lt;code&gt;v-model&lt;/code&gt;.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  -- Global APIs:
&lt;/h2&gt;

&lt;p&gt;Some global Vue APIs have been removed or replaced. For example, you should use createApp to create an app instance instead of &lt;code&gt;new Vue({})&lt;/code&gt;. Additionally, &lt;code&gt;Vue.component&lt;/code&gt; has been replaced with &lt;code&gt;app.component&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--M9ZrPHFH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37cejrlwukahizsugpj8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--M9ZrPHFH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37cejrlwukahizsugpj8.png" alt="global-api" width="800" height="523"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  -- Transition and Animation:
&lt;/h2&gt;

&lt;p&gt;Vue 3 introduces a new system for transitions and animations. If you were using &lt;code&gt;&amp;lt;transition&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;transition-group&amp;gt;&lt;/code&gt; in Vue 2, you must adapt your code for Vue 3.&lt;br&gt;
&lt;br&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  -- Custom Directives:
&lt;/h2&gt;

&lt;p&gt;Vue 3 allows custom directives to be written using the &lt;code&gt;app.directive&lt;/code&gt; method.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rIwMHiMk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygo58upayq6xueq0u9su.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rIwMHiMk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygo58upayq6xueq0u9su.png" alt="transition" width="800" height="698"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  -- Scoped Slots:
&lt;/h2&gt;

&lt;p&gt;Scoped slots have been replaced with the new &lt;code&gt;&amp;lt;slot&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;template v-slot&amp;gt;&lt;/code&gt; syntax.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  -- Async Components:
&lt;/h2&gt;

&lt;p&gt;You should use defineAsyncComponent to create async components in Vue 3.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UKbcOctx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bjia3xl6mu5yowxynf9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UKbcOctx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bjia3xl6mu5yowxynf9.png" alt="async" width="800" height="652"&gt;&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  -- Inject and Provide:
&lt;/h2&gt;

&lt;p&gt;The provide and inject API has been updated to use inject as a part of setup().&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;These examples illustrate some fundamental code changes you must make when upgrading from Vue 2 to Vue 3. Be sure to consult the official Vue 3 documentation and migration guide for comprehensive details on specific changes and updates relevant to your project.&lt;/p&gt;

</description>
      <category>vue</category>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Vuex or Pinia</title>
      <dc:creator>Power_Coder</dc:creator>
      <pubDate>Mon, 18 Sep 2023 22:30:32 +0000</pubDate>
      <link>https://forem.com/power_coder/vuex-or-pinia-39m</link>
      <guid>https://forem.com/power_coder/vuex-or-pinia-39m</guid>
      <description>&lt;p&gt;Pinia and Vuex are state management libraries for Vue.js, a popular JavaScript framework for building user interfaces. They serve the same fundamental purpose: to manage your application's state and provide a centralized way to handle data and its mutations. However, they have some differences in design philosophy and usage.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;-- Architecture--&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Vuex:&lt;/strong&gt; Vuex follows a traditional centralized store pattern. It provides a single store that holds the entire application's state, and components can access and mutate this state through predefined actions and mutations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pinia:&lt;/strong&gt; Pinia, on the other hand, promotes a more modular and decentralized approach. It allows you to create multiple stores, each responsible for managing its own state. This can lead to a more organized and maintainable codebase, especially in larger applications.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;--TypeScript Support--&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Vuex:&lt;/strong&gt; While Vuex can be used with TypeScript, it doesn't offer built-in TypeScript support out of the box. You need to write additional type definitions for your store, actions, mutations, and getters.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pinia:&lt;/strong&gt; Pinia was designed with TypeScript in mind, so it provides better out-of-the-box TypeScript support. This can make your code more type-safe and easier to refactor.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;--Composition API--&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Vuex:&lt;/strong&gt; Vuex can be used with both the Options API and Composition API in Vue.js 3. However, using Vuex with the Composition API can be somewhat verbose and may require additional setup.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pinia:&lt;/strong&gt; Pinia integrates seamlessly with the Composition API, making it a natural choice if you're building Vue 3 applications using the Composition API. Its API design aligns well with the Composition API's reactivity system.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;--Ease of Use--&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Vuex:&lt;/strong&gt; Vuex has been around longer and has a larger community and ecosystem. It's well-documented and has a wide range of plugins and extensions available.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pinia:&lt;/strong&gt; Pinia is relatively newer compared to Vuex, so it may have a smaller community and fewer third-party plugins and extensions. However, some developers find its API and concepts easier to understand and work with, especially when using TypeScript.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;--Bundle Size--&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Vuex:&lt;/strong&gt; Vuex is included in the official Vue.js package, which means it comes bundled with Vue.js by default. This can result in a larger bundle size, even if you're not using Vuex in your project.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pinia:&lt;/strong&gt; Pinia is a standalone library, so it doesn't add to the bundle size of your application unless you explicitly include it. This can be an advantage in terms of keeping your bundle size small.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The coding style for Pinia and Vuex can vary, as they have different approaches to state management in Vue.js applications. Below, I'll outline some of the key differences in coding style when using Pinia compared to Vuex:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;--Coding Style Examples--&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Pinia:&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Modularization&lt;/strong&gt; Pinia encourages a more modular approach to state management. You typically create multiple stores, each responsible for managing a specific piece of state or domain. This leads to a more organized codebase with smaller, focused stores.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="c1"&gt;// Defining a Pinia store&lt;/span&gt;
   &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;defineStore&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pinia&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

   &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;useMyStore&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;defineStore&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;myStore&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="na"&gt;state&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
       &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
     &lt;span class="p"&gt;}),&lt;/span&gt;
     &lt;span class="na"&gt;actions&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
       &lt;span class="p"&gt;},&lt;/span&gt;
     &lt;span class="p"&gt;},&lt;/span&gt;
   &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Composition API&lt;/strong&gt; Pinia integrates seamlessly with Vue 3's Composition API, which encourages using &lt;code&gt;ref&lt;/code&gt;, &lt;code&gt;computed&lt;/code&gt;, and &lt;code&gt;reactive&lt;/code&gt; for defining and working with state. This aligns well with the Composition API's reactivity system.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;computed&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;vue&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

   &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="nx"&gt;setup&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;useMyStore&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Accessing store state&lt;/span&gt;
       &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;doubleCount&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;computed&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Computed property&lt;/span&gt;

       &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
         &lt;span class="nx"&gt;doubleCount&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="p"&gt;};&lt;/span&gt;
     &lt;span class="p"&gt;},&lt;/span&gt;
   &lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;TypeScript Support&lt;/strong&gt; Pinia is designed with TypeScript in mind and provides excellent TypeScript support out of the box. You can strongly type your state, actions, mutations, and getters, which leads to more type-safe code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="c1"&gt;// Strongly typing store state&lt;/span&gt;
   &lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;MyStoreState&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="nl"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;

   &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;useMyStore&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;defineStore&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;myStore&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="na"&gt;state&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nx"&gt;MyStoreState&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
       &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
     &lt;span class="p"&gt;}),&lt;/span&gt;
     &lt;span class="c1"&gt;// ...&lt;/span&gt;
   &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Vuex:&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Centralized Store&lt;/strong&gt; Vuex follows a centralized store pattern, where all application state is stored in a single global store. Actions and mutations are defined to interact with this central store.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="c1"&gt;// Defining a Vuex store&lt;/span&gt;
   &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createStore&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;vuex&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

   &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;createStore&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
     &lt;span class="na"&gt;state&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
     &lt;span class="p"&gt;},&lt;/span&gt;
     &lt;span class="na"&gt;mutations&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
       &lt;span class="p"&gt;},&lt;/span&gt;
     &lt;span class="p"&gt;},&lt;/span&gt;
     &lt;span class="na"&gt;actions&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nx"&gt;incrementAsync&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;commit&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="nx"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
           &lt;span class="nx"&gt;commit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;increment&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
         &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
       &lt;span class="p"&gt;},&lt;/span&gt;
     &lt;span class="p"&gt;},&lt;/span&gt;
   &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Options API and Composition API&lt;/strong&gt; Vuex can be used with both the Options API and Composition API in Vue.js 3. When using the Options API, you define computed properties and methods within components to access and update state.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="na"&gt;computed&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;$store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Accessing store state&lt;/span&gt;
       &lt;span class="p"&gt;},&lt;/span&gt;
     &lt;span class="p"&gt;},&lt;/span&gt;
     &lt;span class="na"&gt;methods&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;$store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;commit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;increment&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Committing a mutation&lt;/span&gt;
       &lt;span class="p"&gt;},&lt;/span&gt;
     &lt;span class="p"&gt;},&lt;/span&gt;
   &lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When using the Composition API with Vuex, you'll often use &lt;code&gt;useStore&lt;/code&gt; to access the store instance within your components.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useStore&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;vuex&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

   &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="nx"&gt;setup&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;useStore&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
       &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;computed&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Accessing store state&lt;/span&gt;

       &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;increment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;commit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;increment&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Committing a mutation&lt;/span&gt;
       &lt;span class="p"&gt;};&lt;/span&gt;

       &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
         &lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
       &lt;span class="p"&gt;};&lt;/span&gt;
     &lt;span class="p"&gt;},&lt;/span&gt;
   &lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To sum up, Pinia and Vuex have different coding styles based on their fundamental design philosophies. Pinia prioritizes a modular, Composition API-centered, and strongly typed method, while Vuex follows a more centralized, Options API-friendly pattern. When choosing between them, it's important to consider your project's requirements and your team's coding preferences.&lt;/p&gt;

&lt;p&gt;Ultimately, the decision between Pinia and Vuex comes down to your project needs and personal preferences. If you prefer a more modular and TypeScript-friendly approach, Pinia may be the right choice for you. However, if you're already experienced with Vuex and prefer the centralized store pattern or your project already uses Vuex, it's best to stick with it. Both libraries are effective in managing the state within Vue.js applications.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>vue</category>
      <category>pinia</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
