No Need to Use Pinia in New Vue3 Projects!

Recently, I started a new Vue3 project with a limited number of pages, and among them, three or four pages needed to share state. Almost reflexively, I installed Pinia for state management.
Then I thought, do I really need to integrate a whole set of Pinia just to store a few states in a repository?
Actually, it’s not necessary. I almost forgot about an important feature of Vue3, which is composable functions.
Everyone is familiar with the Composition API, but perhaps not everyone has paid special attention to composable functions. However, they are powerful enough to implement global state management.

Composables

What is a composable function?

Here is the official introduction: In the context of Vue applications, a “composable function” is a function that encapsulates and reuses stateful logic using Vue’s Composition API.

From this introduction, it can be seen that a composable function must meet two key points:

  1. Composition API.
  2. A function with stateful logic.

In Vue components, state is typically defined within the component itself. For example, with the typical Options API, state is defined under the component’s data() method, so this state can only be used within the component.
After the emergence of Vue 3, the Composition API was introduced. However, for most people, it seems that the only change was from defining state with data() to ref(), which doesn’t appear to make much of a difference.
In fact, the difference is significant.
The ref() and other methods provided by the Composition API are not only usable within Vue components but can be used in any JavaScript file.
This means that the Composition API can separate components from state, allowing state to be defined outside of components and used within them. When we define a stateful function using the Composition API, this is what we call a composable function.
Therefore, composable functions can fully implement global state management.

For example, let’s say we define the user information state in a composable function, the method would be as follows:

// user.js
import { ref } from 'vue'

export function useUinfo() {
  const user_info = ref(null)
  const setUserInfo = (data) => {
    user_info.value = data
  }
  return { user_info, setUserInfo }
}

In the code, useUinfo() is a composable function that uses ref() to define the state and exports both the state and methods.

Within a Vue 3 component, you can import and use this state as follows:

<script setup>
import useUinfo from './user.js';
const { user_info, setUserInfo } = useUinfo();
</script>

Take a close look at how composable functions are used; they resemble React’s Hooks, don’t they? They can indeed be seen as a form of Hook.

By importing the state using the above method in multiple components, you achieve a way to manage state across components.

Modular Usage Method

Composable functions, when called in multiple components, may lead to the issue of redundantly creating state. Actually, we can use a modular approach, which is simpler.

Transform the composable function in the aforementioned user.js file as follows:

import { ref } from 'vue'

export const user_info = ref(null)
export const setUserInfo = (data) => {
 user_info.value = data
}

This way, when using it in a component, you can simply import it directly:

<script setup>
import { user_info, setUserInfo } from './user.js';
</script>

After testing, this approach is feasible. Using a modular method, that is, defining a set of states in one file, can be seen as a Pinia store. In this way, the problem of state modularization is also solved. One of the most commonly used features in Pinia is getters, which are another state dynamically calculated based on a certain state. This can be fully implemented using computed properties in composable functions.

import { ref, computed } from 'vue'

export const num1 = ref(3)

export const num2 = computed(()=> {
 return num1 * num1
}

So let’s think about it, for projects developed with Vue 3’s Composition API, can composable functions completely replace state management (Pinia, Vuex)?

Of course, the above solution only applies to ordinary projects developed with the Composition API. For projects developed with the Options API, or those that require SSR, just stick to using Pinia.

Most importantly! If an interviewer asks you: Besides Pinia and Vuex, are there any other state management solutions?

Don’t say you don’t know, remember these words: composable functions!

END
 1
Comment(No Comments)