Shulou(Shulou.com)06/02 Report--

This article mainly introduces "which is the new state management tool of Vue3". In the daily operation, I believe that many people have doubts about which is the new state management tool of Vue3. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "which is the new state management tool of Vue3". Next, please follow the editor to study!

A new Vue3 state management tool: Pinia

Vue3 has been released for some time, it uses a new responsive system, and it has built a new set of Composition API. The ecology around Vue is stepping up adaptation to the new system, and the official state management library Vuex is also adapting, so officials have put forward a new proposal for Vuex 5.

Support two grammars to create Store:Options Api and Composition Api

Delete mutations. Only state, getters and actions are supported.

Modular design, can well support code segmentation

There are no nested modules, only the concept of Store

Full TypeScript support

Under this proposal, there is an interesting comment. A brief translation:

Coincidentally, Vuex5's proposal has nothing to do with the function of Pinia. It can only be said to be exactly the same. Today's article will introduce this pineapple to you.

Installation

In the existing project, the following command has been used to install the Pinia module.

# yarnyarn add pinia@next# npmnpm i pinia@next

After the installation is complete, you need to import and install it in the entry file of the Vue3 project.

/ / main.jsimport {createApp} from 'vue'import {createPinia} from' pinia'import App from'. / App.vue'// instantiate Vueconst app = createApp (App) / / install Piniaapp.use (createPinia ()) / / mount it to the real DOMapp.mount ('# app')

Upper hand

To use Pinia, you just need to define a store and import it where the data is used.

Define Store

Import {defineStore} from "pinia" / / A pair of externally exposed use methods that export our defined stateconst useCounterStore = defineStore (the id of each store must be unique id: 'counter', / / state represents the data source state: () = > ({count: 0}), / / getters is similar to computed The value of state can be calculated twice getters: {double () {/ / getter pointing to state return this.count * 2}, / / if using the arrow function will cause this to point to a problem / / you can get state double in the first parameter of the function: (state) = > {return state.count * 2}} / / actions is used to modify state actions: {increment () {/ / action points to state this.count++},}}) export default useCounterStore

In addition to using the above vuex-like way to build state, you can also use the form of function to create store, which is somewhat similar to setup () in Vue3.

Import {ref, computed} from "vue" import {defineStore} from "pinia" / / A pair of externally exposed use methods that derive our defined stateconst useCounterStore = defineStore ('counter', function () {const count = ref (0) const double = computed (() = > count.value * 2) function increment () {count.value++} return {count, double, increment}}) export default useCounterStore

Use Store

As mentioned earlier, Pinia provides two ways to use perfect support in both store,Options Api and Composition Api.

Options Api

In Options Api, you can directly use the official mapActions and mapState methods to export state, getter and action in store. Their usage is basically the same as that of Vuex and is easy to use.

Import {mapActions, mapState} from 'pinia'import {useCounterStore} from'.. / model/counter'export default {name: 'HelloWorld', computed: {. MapState (useCounterStore, [' count', 'double'])}, methods: {. MapActions (useCounterStore, [' increment'])}}

Composition Api

In Composition Api, both state and getter need to listen for changes through the computed method, just as in Options Api, you need to put it in a computed object. In addition, the state value obtained in Options Api can be modified directly. Of course, it is recommended to write an action to manipulate the state value to facilitate later maintenance.

/ / Composition Apiimport {computed} from 'vue'import {useCounterStore} from'.. / stores/counter'export default {name: 'HelloWorld', setup () {const counter = useCounterStore () return {/ / state and getter are required to use computed This is the same as Options Api count: computed (() = > counter.count), double: computed (() = > counter.double), increment: () = > {counter.count++}, / / you can directly modify the value of state increment: counter.increment, / / you can refer to action}} defined in store

Type hint

In Vuex, the type hint of TypeScript is not very good, and you can only find its state when doing type derivation. Especially in the process of writing code, code hints are very unintelligent.

Pinia, on the other hand, can derive all the defined state, getter, and action, which makes it much easier to write code.

The main reason is that pinia has a very friendly type definition through TypeScript. If you are interested, you can take a look at pinia's type definition file (pinia.d.ts):

Code segmentation

Due to the use of modular design, all store can be introduced separately, rather than mounting all module to a store through modules, as in vuex.

Suppose we currently create a Store through Vuex, and there are two module under this Store, namely the user module (User) and the merchandise module (Goods). Even if only user information is used on the current home page, the entire Store is packaged into the js chunk on the front page.

If we use pinia, we will use defineStore to define two store that are completely separate, and the two pages will not affect each other when introduced. When you finally pack, the js chunk of the home page and the js chunk of the merchandise page will package the corresponding store respectively.

This is the end of the introduction to Pinia. If you have a new project to develop with Vue3, it is recommended to use Pinia without a brain, which is more concise and only 1KB in size.

At this point, the study of "which is the new state management tool for Vue3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.