1. What is pinia?
pinia is a state management library for vue, similar to vuex, another state management tool for vue
Second, the advantages and disadvantages of pinia
1. Advantages of Pinia
- Full TypeScript support: Adding TypeScript is easier than adding TypeScript in Vuex
- Extremely lightweight (about 1KB in size)
- Store actions are dispatched as regular function calls, rather than using the dispatch method or the MapAction helper function, which is common in Vuex
- Support for multiple Stores
- Support for Vue devtools, SSR and webpack code splitting
2. The disadvantages of Pinia
- Debugging features like time travel and editing are not supported
3. The difference between pinia and vuex
- pinia does not have mutation, it only has state, getters, action [synchronous, asynchronous] use it to modify state data
- Pinia is also stored in memory by default. If you need to use local storage, the configuration is a little more troublesome than vuex
- Pinia is syntactically easier to understand and use than vuex, and is more flexible.
- pinia has no modules configuration, and no independent warehouse is generated by definStore
- The pinia state is an object. Returning an object has the same syntax as the data of the component.
4. How to use pinia
- First open the cmd command line in the project and enter npm install pinia
2. After the installation is complete, we can see it in the project package.json file
This means the installation is successful
3. Then import it under the mian.js folder
4. Then create a store folder under the src folder and create an index.js file under this folder in index.js
Create pinia module data under the file, etc.
5. Then import the items you need
Note here that the module you import must have the same name as the one you named in the store (multiple modules can be created