Vuex

Last updated
Vuex
Original author(s) Evan Yue
Initial releaseNovember 2016;7 years ago (2016-11)
Stable release
4.0.2 / June 17, 2021
Repository github.com/vuejs/vuex
Written inJavaScript
Platform Web platform
PredecessorVuex
Size 508 KB
Type State management library
License MIT License
Website vuex.vuejs.org

Vuex is an open-source state management library for Vue.js applications and a JavaScript framework. It was created by Evan You, the developer behind Vue.js, to provide a centralized store for managing state in Vue.js applications, making it easier to handle and synchronize data across components. [1]

Contents

Overview

Since Vuex follows a unidirectional data flow pattern, data flows in one direction throughout the application. [2]

In Vuex, application states are stored in a single store—a JavaScript object. Each component in the application can access the store and update its state, while the store itself may only be modified by committing mutations. Mutations are functions that can change the state of the store and must always be synchronous in nature. [3]

Actions are asynchronous functions that not only commit mutations but also perform other operations, including API calls. They are used to handle complex logic and can be called from components or other actions. [4]

Getters, on the other hand, are functions that enable components to access and manipulate the state of the store without modifying it. They can be used to derive values from the state or filter the data. [5]

History

Vuex's history begins with the creation of Vue.js, a progressive JavaScript framework developed by Evan You. Vue.js was first released in February 2014. It gained popularity quickly due to its simplicity and performance.

As Vue.js applications grew in complexity, there arose a need for effective state management. Developers wanted a solution to manage and synchronize the state of components in a Vue.js application.

Evan You, the creator of Vue.js, recognized this need and decided to build a dedicated state management library that would seamlessly integrate with Vue.js. This library later became known as Vuex.

Vuex was officially introduced in March 2015. Its goal was to provide a centralized and predictable way to manage application state in Vue.js applications. [6]

Features

Centralized state management

Vuex allows for the centralized management of an application's state, theoretically making it easier to maintain and update. [7]

Predictable state changes

Since mutations are synchronous, and actions are asynchronous in nature, state changes in an application are predictable and easier to debug. [8]

Focus on performance

Vuex reduces the amount of duplicated code in an application, which can often improve its performance. [9]

Simplified communication between components

Since each component has access to the same store, communication between them is also simplified. [10]

Future

In terms of future development, the Vuex team has been working on enhancing the library and recently released Vuex 4. This version brings improved TypeScript support, enhanced debugging tools, and better performance. The team has also been working on adding support for server-side rendering and introducing a new composition API, which will reportedly make it easier to use Vuex with Vue.js in the future. [11] [ timeframe? ]

Pinia is another state management library for Vue.js applications that has called the future of Vuex into question. Released in 2019, like Vuex, it provides a centralized store for managing the state of an application. However, this differs from Vuex in several ways. First, Pinia uses a more modern API and is able to leverage the capabilities of the Composition API in Vue.js 3. Pinia has a smaller codebase and different structure compared to Vuex, which some developers find easier to understand, particularly those new to state management in Vue.js. As a result of these advantages, Pinia is gaining considerable popularity in the Vue.js community and has replaced Vuex in many ways as the preferred state management library for Vue.js projects. Nevertheless, Vuex still benefits from a large user base and remains widely used in existing Vue.js applications. [12]

See also

Related Research Articles

In software engineering, the terms frontend and backend refer to the separation of concerns between the presentation layer (frontend), and the data access layer (backend) of a piece of software, or the physical infrastructure or hardware. In the client–server model, the client is usually considered the frontend and the server is usually considered the backend, even when some presentation work is actually done on the server itself.

Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.

Ajax is a set of web development techniques that uses various web technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly utilize JSON instead of XML.

In computing, a solution stack or software stack is a set of software subsystems or components needed to create a complete platform such that no additional software is needed to support applications. Applications are said to "run on" or "run on top of" the resulting platform.

A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications on the World Wide Web. Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites.

<span class="mw-page-title-main">Dojo Toolkit</span> Open-source modular JavaScript library

Dojo Toolkit is an open-source modular JavaScript library designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites. It was started by Alex Russell, Dylan Schiemann, David Schontzler, and others in 2004 and is dual-licensed under the modified BSD license or the Academic Free License.

State management refers to the management of the state of one or more user interface controls such as text fields, submit buttons, radio buttons, etc. in a graphical user interface. In this user interface programming technique, the state of one UI control depends on the state of other UI controls. For example, a state-managed UI control such as a button will be in the enabled state when input fields have valid input values, and the button will be in the disabled state when the input fields are empty or have invalid values. As applications grow, this can end up becoming one of the most complex development problems.

<span class="mw-page-title-main">Google Web Toolkit</span> Free Java library

Google Web Toolkit, or GWT Web Toolkit, is an open-source set of tools that allows web developers to create and maintain JavaScript front-end applications in Java. It is licensed under Apache License 2.0.

<span class="mw-page-title-main">Aptana</span> Text editor

Aptana, Inc. is a company that makes web application development tools for use with a variety of programming languages. Aptana's main products include Aptana Studio, Aptana Cloud and Aptana Jaxer.

Svelte is a free and open-source component-based front-end software framework, and language created by Rich Harris and maintained by the Svelte core team members.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

<span class="mw-page-title-main">Node.js</span> JavaScript runtime environment

Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser.

<span class="mw-page-title-main">Ember.js</span> JavaScript framework

Ember.js is an open-source JavaScript web framework that utilizes a component-service pattern. It is designed to allow developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.

<span class="mw-page-title-main">React (JavaScript library)</span> JavaScript library for building user interfaces

React is a free and open-source front-end JavaScript library for building user interfaces based on components by Facebook Inc. It is maintained by Meta and a community of individual developers and companies.

NativeScript is an open-source framework to develop mobile apps on the iOS and Android platforms. It was originally conceived and developed by Bulgarian company Telerik, later acquired by Progress Software. At the end of 2019 responsibility for the NativeScript project was taken over by long-time Progress partner, nStudio. In December 2020, nStudio also oversaw the induction of NativeScript into OpenJS Foundation as an Incubating Project. NativeScript apps are built using JavaScript, or by using any programming language that transpiles to JavaScript, such as TypeScript. NativeScript supports the Angular and Vue JavaScript frameworks. Mobile applications built with NativeScript result in fully native apps, which use the same APIs as if they were developed in Xcode or Android Studio. Additionally, software developers can re-purpose third-party libraries from CocoaPods, Maven, and npm.js in their mobile applications without the need for wrappers.

<span class="mw-page-title-main">Vue.js</span> Open-source JavaScript library for building user interfaces

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and is maintained by him and the rest of the active core team members.

Angular is a TypeScript-based free and open-source single-page web application framework. It is developed by Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. The Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators. According to the Stack Overflow Developer Survey, Angular is one of the most commonly used web frameworks, similar to React.

Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook's Flux architecture, it was created by Dan Abramov and Andrew Clark. Since mid-2016, the primary maintainers are Mark Erikson and Tim Dorr.

<span class="mw-page-title-main">Pinia</span> Open-source web development framework

Pinia is a store library and state management framework for Vue.js. Designed primarily for building front-end web applications, it uses declarative syntax and offers its own state management API. Pinia was endorsed by the Vue.js team as a credible alternative to Vuex and is currently the official state management library for Vue.

References

  1. ↑ "What is Vuex? | Vuex". vuex.vuejs.org. Retrieved 2024-02-14.
  2. ↑ "Understanding Unidirectional Data Flow - Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API) [Video]". www.oreilly.com. Retrieved 2023-03-27.
  3. ↑ "Getting Started with Storing Vue Data in Vuex". Fjolt. Retrieved 2023-03-31.
  4. ↑ "How to query your API using Vuex in your Vue application". DEV Community. 12 November 2019. Retrieved 2023-03-31.
  5. ↑ "When To Use Vuex Getters In a Vue.js Project". www.drewtown.dev. 27 August 2019. Retrieved 2023-03-31.
  6. ↑ "Between the Wires interview with Evan You - Between the Wires". 2017-06-03. Archived from the original on 2017-06-03. Retrieved 2023-03-27.
  7. ↑ "Vuex: State Management Simplified in Vue.js". www.codemag.com. Retrieved 2023-03-31.
  8. ↑ "Reactive And Simple State Management With Vuex". GeekyAnts Tech Blog. 17 May 2022. Retrieved 2023-03-31.
  9. ↑ "When To Use Vuex Getters In a Vue.js Project". www.drewtown.dev. 27 August 2019. Retrieved 2023-03-31.
  10. ↑ Ago, Alfarisi94in #utopian-Io • 5 Years (2017-12-27). "How Communicating Between Components With Vuex, State Management From Vue". Steemit. Retrieved 2023-03-31.{{cite web}}: CS1 maint: numeric names: authors list (link)
  11. ↑ "What's Coming To VueX?". Smashing Magazine. 2020-12-24. Retrieved 2023-03-31.
  12. ↑ Kotov, Oleksandr (2023-01-11). "Pinia vs Vuex: Farewell Vuex, Hello Pinia! How to Get Started? - SPG Blog - Web Applications Development". Software Planet Group. Retrieved 2023-03-27.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.