Test Pinia, Vuex is out?

Author: Emil Hein
Translator: Front-end Xiaozhi Source: betterprogramming

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

Since I started using Vue 3 and composition API, I also tried to use Pinea as a state management library. If you come from vue2 and vuex, you will feel that there is still a big difference in use.

To be honest, I'm still very uncomfortable with Vuex. Initially, there was "a lot" of template code, just to make the store use less. State management does give us traversal, though, especially when we have a small piece of state that should be shared across components, it's more likely to be used.

Let's first take a look at the overall design of Vuex and Pinia and what are the differences between them.

vuex

The following is the official diagram of the working principle of Vuex. When I first started learning, I was very confused at first glance, but when I used it to develop a project, I could understand it at a glance.

In the Vuex store, there are 4 main components.

1. State

It's just an object containing the actual state. We can see this state in the dev tools, and we can also save the object if we want to keep this state for caching or other purposes.

2. Actions

Actions are functions that perform asynchronous tasks. They are initiated by the keyword dispatch .

Actions usually request an external API or do some other asynchronous work. It is also responsible for calling the appropriate mutation to actually change the state. This shows that the actions themselves do not change the state, but commit change, and let the mutation change the state.

3. Mutations

Mutation is the only function that actually changes state synchronously. Mutations use the keyword commit .

4. Getters

Getters can be thought of as computed properties that should be used to get a modified response from the state.

An example of a simple Vuex store looks like this:

 const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

use store

When dealing with the above problems, a component will usually call dispatch to start an asynchronous task (such as fetching from an external API). If you need to change state, such as a simple counter, you can call commit .

This means that a component can interact with store by calling dispatch or commit . I don't know what you think, but for me it adds some mental load that I really don't need.

Before using Vuex, I was not familiar with the terms "commit" and "dispatch". For this reason, using them to change state is not intuitive to me. For some it may be different, but it makes me feel a little uncomfortable using either action or mutation .

It's also worth noting that with Vuex, one component can access the entire store, despite logically splitting the Vuex store into different files.

Pinia

Compared to Vuex, Pinia works like this:

The overall architecture is simpler and easier to understand than Vuex. A Pinia store has 3 main components:

1. State

Same as Vuex's definition.

2. Actions

Actions here work the same as Actions and mutations in Vuex. These functions are the only way to change state. You can also use actions if you want to get data from an external API and update state.

Another difference from the Vuex setup is that Pinia actions are normal functions with much less mental burden than vuex.

3. Getters

The getter is exactly equivalent to the computed property of the Store state

An example of a simple Pinia store is shown below:

 export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    }
  },
})

use

If there are multiple templates, Vuex generally adopts the modules method, which requires store/index.ts all the modules through creaeStore to cfce86b34a0140bfce store中，那么Pinia 就省去了这些麻烦， createPinia() ，不需要注册modules ，没有任何参数，所以连store/index.ts can use it, just add it directly to main.ts , which will be much simpler than Vuex

 import { createPinia } from 'pinia'
app.use(createPinia())；
# main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia())

app.mount('#app')

Summarize

For now, I'd say Pinia is easier to understand and use. Maybe there is something that would allow Vuex to scale better in larger projects, but I haven't come across that.

Another important thing for me is that we can call normal methods of actions with normal parameters.

Pinia also supports Vue 2 and 3 out of the box, which makes migration easier.

Advantage

Finally, I also summarize the advantages of Pinia:

• Both Vue2 and Vue3 are supported
• Smaller, only 1KB
• No need for nested modules, in line with Vue3's Composition api, making the code more flat
• Abandoned the operation of Mutations, only state, getters and actions. Greatly simplified the use of state management library Full TypeScript support
• The code is more concise and can achieve good automatic code segmentation

Pinia has many users and details, please go to the official documentation Home | Pinia (vuejs.org)

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool , Fundebug .

---

Forgive: https://betterproramming.pub/testig-pinia-is-vuex-out-43e0531824f5

comminicate

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.