Using Vuex with Vue 3

In the Vue 3 ecosystem, state management remains a core component in building large and medium-sized Single Page Applications (SPAs). However, Vue 3 has undergone a significant paradigm shift regarding state management: the official documentation no longer recommends the traditional Vuex, instead introducing Pinia. This transition is not intended to negate the value of Vuex, but rather to leverage TypeScript's strong typing capabilities, a more concise API design, and improved performance, thereby reducing the cognitive burden on developers and enhancing code maintainability.

For Vue 3 developers, mastering Pinia is not only a requirement to follow community best practices but also the foundation for building high-quality applications. The design philosophy of Pinia aims to simplify state management, making it more intuitive, flexible, and easy to test. It discards the complex plugin system and optional namespace concepts found in Vuex, opting instead for a flat Store structure that allows developers to focus more directly on the business logic itself.
Pinia is built upon the foundation of Vue 3's Composition API, which means it can seamlessly utilize native features such as setup(), ref, and reactive. Its core design philosophy can be summarized in the following points:

• TypeScript First: Pinia integrates TypeScript deeply at the bottom level, supporting automatic type inference. Developers do not need to manually write complex type definition files; their IDE provides complete code completion and error highlighting out of the box.
• Flat Structure: Unlike Vuex's modular Stores, Pinia defaults to a flat Store design. Each Store is an independent object containing state, computed properties, derived properties, Getters, Setters, and methods. This design makes logic more transparent and avoids maintenance difficulties caused by overly deep nesting levels.
• Lightweight and High Performance: Pinia does not introduce unnecessary abstraction layers, significantly reducing code volume. It directly leverages Vue 3's reactivity system to ensure efficient state updates.

Getting Started with Pinia Stores

To begin using Pinia, you first need to install the dependencies and initialize a Store. While installation can be done via npm or yarn, projects typically include the necessary configuration automatically. The first step is to create a store file named useUserStore. In Pinia, there is no strict separation of mutations, actions, and getters as seen in Vuex; instead, everything can be managed within a single object.

Here is an example of typical user state management:

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  // 1. Define State
  const userInfo = ref({
    id: '',
    name: '',
    email: ''
  })
  
  const isLoggedIn = ref(false)

  // 2. Computed Properties
  const userName = computed(() => userInfo.value.name || 'Guest')

  // 3. Getter (Optional, for accessing deep state)
  const getFullName = () => `${userInfo.value.name} ${userInfo.value.email}`

  // 4. Setter (Optional, for modifying nested state)
  const setUserInfo = (newInfo: any) => {
    userInfo.value = newInfo
  }

  // 5. Methods (Actions/Mutations merged)
  const login = () => {
    isLoggedIn.value = true
    userInfo.value.id = '12345'
    userInfo.value.name = 'Alice'
    userInfo.value.email = 'alice@example.com'
  }

  const logout = () => {
    isLoggedIn.value = false
    userInfo.value.name = ''
    userInfo.value.email = ''
  }

  // 6. Derived Properties
  const isAdmin = computed(() => userInfo.value.id === 'admin')

  return {
    userInfo,
    isLoggedIn,
    userName,
    getFullName,
    setUserInfo,
    login,
    logout,
    isAdmin
  }
})

In this example, the defineStore function returns an object containing all state and methods. This approach greatly simplifies the code structure, making the logic crystal clear.

Using Pinia in Components

Similar to Vuex, Pinia offers two primary ways to access state: the Composition API (recommended) and the Options API. Since Vue 3 primarily promotes the Composition API, we typically import and use the corresponding store directly within the setup() function.

Assume we are creating a user information display component named UserCard.vue:

<template>
  <div class="user-card">
    <h2>{{ userName }}</h2>
    <p>Email: {{ userInfo.email }}</p>
    <button @click="login" v-if="!isLoggedIn">Login</button>
    <button @click="logout" v-else>Logout</button>
    <div v-if="isAdmin">Admin privileges enabled</div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from './useUserStore'

const userStore = useUserStore()

// Directly access computed properties and methods within the component
</script>

In this manner, components do not need to know the internal implementation details; they simply rely on the interfaces provided by the store. This decoupling improves code reusability and facilitates sharing state logic across different modules.

Best Practices and Future Outlook

Adhering to certain best practices when using Pinia can further enhance the development experience. First, strive to keep Store logic focused on a single responsibility, avoiding mixing unrelated business domains within a single Store. Second, make full use of TypeScript's type inference capabilities to reduce boilerplate code. Finally, note that while Pinia maintains excellent performance even in scenarios involving large data updates, it is important to design computed properties reasonably to avoid unnecessary re-renders.

Although Vuex is still widely used and compatible with both Vue 2 and Vue 3, embracing Pinia is a wiser choice for new Vue 3 projects. It represents the technical evolution direction of the Vue ecosystem and provides developers with a more modern, type-safe, and collaborative state management solution. As community support for Pinia matures, it is expected to become the standard tool for future Vue application development.