Software:Vuex
| Original author(s) | Evan Yue |
|---|---|
| Initial release | November 2016 |
| Stable release | 4.0.2
/ June 17, 2021 |
| Repository | github |
| Written in | JavaScript |
| Platform | Web platform |
| Predecessor | Vuex |
| Size | 508 KB |
| Type | State management library |
| License | MIT License |
| Website | vuex |
Vuex is an open-source state management library for Vue.js applications. It was created by Evan You, the developer behind Vue.js, to provide a centralized store for managing state in Vue.js applications.
Overview
Vuex is based on the Flux architecture, a pattern for managing the state of an application. Flux itself is composed of four components: store, actions, views, and mutations.[1]
Since Vuex follows a unidirectional data flow pattern, data flows in one direction throughout the application.[2]
In Vuex, application state is 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.[5]
Simplified communication between components
Since each component has access to the same store, communication between them is also simplified.[9]
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.[10][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. It is also smaller and simpler than Vuex, which makes it easier to understand and use, particularly for developers 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.[11]
See also
- Vite
- Pinia
References
- ↑ Tientcheu, Dylan (2020-12-24). "Do you really need Vuex?" (in en-US). https://blog.logrocket.com/do-you-really-need-vuex/.
- ↑ "Understanding Unidirectional Data Flow - Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API) [Video"] (in en). https://www.oreilly.com/library/view/vue-the/9781788992817/video8_8.html.
- ↑ "Getting Started with Storing Vue Data in Vuex" (in en-GB). https://fjolt.com/article/vue-vuex-getting-started.
- ↑ "How to query your API using Vuex in your Vue application" (in en). https://dev.to/firstclown/how-to-query-your-api-using-vuex-in-your-vue-application-11c8.
- ↑ 5.0 5.1 "When To Use Vuex Getters In a Vue.js Project" (in en). https://www.drewtown.dev/post/when-to-use-vuex-getters-in-a-vue-js-project/.
- ↑ "Between the Wires interview with Evan You - Between the Wires". 2017-06-03. https://betweenthewires.org/2016/11/03/evan-you/.
- ↑ "Vuex: State Management Simplified in Vue.js" (in en-us). https://www.codemag.com/Article/2001051/Vuex-State-Management-Simplified-in-Vue.js.!.
- ↑ "Reactive And Simple State Management With Vuex" (in en). https://techblog.geekyants.com/reactive-and-simple-state-management-with-vuex.
- ↑ Ago, Alfarisi94in #utopian-Io • 5 Years (2017-12-27). "How Communicating Between Components With Vuex, State Management From Vue" (in en). https://steemit.com/utopian-io/@alfarisi94/how-communicating-between-components-with-vuex-state-management-from-vue.
- ↑ "What's Coming To VueX?" (in en). 2020-12-24. https://www.smashingmagazine.com/2020/12/vuex-library/.
- ↑ Kotov, Oleksandr (2023-01-11). "Pinia vs Vuex: Farewell Vuex, Hello Pinia! How to Get Started? - SPG Blog - Web Applications Development" (in en-GB). https://softwareplanetgroup.co.uk/piniavsvuex/.
External links
 |  |
