Vuex Quick Start - What is vuex?
For more information, please refer to the official Vuex documentation
creative background
In 2023, of course, you have to learn some new technologies, and learn in depth on the basis of learning VueVue's state management mode - vuex. The main study of this articleThe basics of vuex and how to configure and install vuex in the project。
Basic knowledge of vuex
1. What is vuex?
According to the official website, Vuex is a state management pattern + library specially developed for Vue.js applications. It uses a centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable manner.
Two, the composition of vuex
Vuex consists of five parts, namelyState、Mutation、Action、Module、Getter。
| Attributes | explain |
|---|---|
| State | shared state (i.e. variables) |
| Mutation | The only way to change the state in the vuex store is to modify the state (variable value) only by submitting a mutation |
| Action | Similar to mutation, modify the state in the store. But I just said that the state can only be modified by submitting a mutation, so Action also modifies the state in the store by submitting a mutation. Unlike Mutataion, Action supports asynchronous operations. |
| Module | Modules, in large-scale projects, in order to facilitate state management and collaborative development, the store is split into multiple sub-modules (modules), and each sub-module has a complete state, mutation, action, and getter. (not introduced here) |
| Getter | State-based derived state, which can be understood as a computed property in a component |
3. Why use vuex?
The indirection of one-way data flow is easily broken when our application encounters multiple components sharing state:
- 1.Multiple views depend on the same state
- 2.Actions from different views need to mutate the same state
For problem 1, the method of passing parameters will be very cumbersome for multi-layer nested components, and it can't do anything about state transfer between sibling components.
For problem two, we often use parent-child components to directly reference or use events to change and synchronize multiple copies of the state. These patterns above are very brittle and often lead to unmaintainable code.
In fact, vuex can be simply understood asReactive global variables, and its function is also similar to global variables (static variables) in C language, C++, and Java .
4. When to use vuex?
Vuex can help us manage shared state, and comes with more concepts and frameworks, which requires us to weigh short-term and long-term benefits.
- If you don't plan to develop a large single-page application, using vuex may be cumbersome and redundant.
- If necessary build aMedium and large single-page applications, we may better manage the state outside the component, and vuex will be the best choice.
Installation and configuration of vuex
1. Direct download / CDN reference
- https://unpkg.com/vuex@4
The above link will always point to the latest version released on npm- https://unpkg.com/
The above link provides an npm-based CDN link- https://unpkg.com/[email protected]/dist/vuex.global.js
The link above can download a specific version
Introducing vuex after vue will automatically install
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
However, we still recommend installing with npm
Two, npm install vuex
The premise of using npm installation: install node.js
installation link: https://nodejs.org/en/
1.Download the latest version of node.js
- Download the node.js version in the box and complete the installation. (If you can’t do it halfway, you can find the specific installation process on the Internet)
two,Configure node.js
- The first step is win+r to open the command window and enter cmd
- The second step is to enter the following command.
node -vAfter input, the version number of node will be displayed.
npm -vAfter input, the version number of corresponding npm will be displayed.
If the following figure is displayed, it means that node.js configuration is successful and you can proceed to the next step.
Enter the file where the project is located in the terminal cd, and then enter the following code to install vuex
npm install vuex@next --save
When the following content is displayed, it means that the installation is successful.
At this time, we open the package.json file of the project
When vuex and the version number are displayed in dependencies, vuex is perfectly installed in the project.
Three, yarn installation
The premise of using yarn installation: install yarn
installation link: https://www.yarnpkg.cn/
installation steps will not be elaborated here
Enter the file where the project is located in the terminal cd, enter the following:
yarn add vuex@next --save
To verify whether the installation is successful or not, you can refer to the verification method of npm installation, and find vuex and its version number in the package.json file.
4. Build it yourself
If you need to use the latest version from the dev branch, you can clone the code directly from GitHub and build it yourself.
git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
yarn
yarn build