在 Vue 3 项目中，如何使用 `Pinia` 替代 `Vuex`，并说明其在模块化、`TypeScript` 支持和 `SSR` 上的优势？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

观众朋友们大家好，我是老码农，今天咱们不聊风花雪月，就来聊聊Vue 3项目里如何用Pinia这把瑞士军刀，替换掉Vuex这把略显笨重的菜刀。主题就是： Vue 3状态管理：从Vuex到Pinia的丝滑迁移与性能飞跃。

我知道，很多人提起Vuex，心里五味杂陈。一方面，它确实解决了大型项目状态管理的燃眉之急；另一方面，它的配置繁琐、类型推断不友好、以及在SSR场景下的各种坑，也让人头疼不已。

所以，今天我们就来彻底解决这些问题，让你的Vue 3项目状态管理焕然一新！

开场白：Vuex，曾经的战友，现在…

首先，咱们要承认，Vuex在Vue 2时代功不可没。它就像一位老战友，陪我们走过无数个项目，解决了状态共享、数据持久化等难题。但是，随着Vue 3的到来，以及Pinia的横空出世，这位老战友似乎有点力不从心了。

就像手机从诺基亚到iPhone的转变一样，Pinia在某些方面确实比Vuex更胜一筹。它更轻量、更灵活、对TypeScript的支持也更好，而且在SSR方面也更加友好。

第一部分：Pinia，你的Vue 3状态管理新宠

Pinia，读作 /piːnjə/，是西班牙语“菠萝”的意思。作者Eduardo San Martin Morote，也是Vue的核心团队成员，所以你可以放心地把你的状态交给它管理。

1.1 安装Pinia

首先，咱们要做的就是安装Pinia。这很简单，只需要一条命令：

npm install pinia
# 或者
yarn add pinia
# 或者
pnpm add pinia

1.2 创建Pinia实例

接下来，我们需要创建一个Pinia实例，并在Vue应用中使用它。在你的main.js或者main.ts文件中，添加以下代码：

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

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

1.3 定义你的第一个Store

现在，是时候定义你的第一个Store了。Store就像Vuex里的Module，用于存放和管理你的状态、actions和getters。

在你的项目中创建一个stores目录，并在其中创建一个名为counter.js (或者 counter.ts)的文件，内容如下：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
    incrementBy(amount) {
      this.count += amount
    },
  },
})

代码解释：

defineStore('counter', ...)：定义一个名为counter的Store。这个counter是Store的ID，必须是唯一的。
state: () => ({ count: 0 })：定义状态。state是一个函数，返回一个对象，包含Store的状态。注意，这里必须是一个函数，而不是一个对象。这是为了避免在SSR场景下，多个用户共享同一个Store实例。
getters: { doubleCount: (state) => state.count * 2 }：定义计算属性。getters是一个对象，包含Store的计算属性。
actions: { increment() { this.count++ } }：定义actions。actions是一个对象，包含Store的actions。actions可以修改状态，也可以执行异步操作。

1.4 在组件中使用Store

现在，我们可以在组件中使用这个Store了。在你的组件中，添加以下代码：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="incrementBy(5)">Increment by 5</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

const { count, doubleCount } = counter
const { increment, decrement, incrementBy } = counter
</script>

代码解释：

import { useCounterStore } from '@/stores/counter'：导入useCounterStore函数。
const counter = useCounterStore()：调用useCounterStore函数，获取Store实例。
const { count, doubleCount } = counter：解构Store实例，获取状态和计算属性。
const { increment, decrement, incrementBy } = counter：解构Store实例，获取actions。

第二部分：Pinia vs Vuex：全面对比分析

好了，现在你已经学会了Pinia的基本用法。接下来，咱们来对比一下Pinia和Vuex，看看Pinia到底有哪些优势。

特性	Pinia	Vuex
配置	非常简单，几乎零配置	较为繁琐，需要创建store实例、modules等
类型支持	优秀的TypeScript支持，类型推断准确	TypeScript支持较弱，需要手动定义类型
Mutations	没有Mutations，actions直接修改state	需要通过Mutations来修改state
模块化	更简洁的模块化方式，每个store都是独立的	需要使用modules选项，结构相对复杂
体积	更小	更大
SSR支持	更好地支持SSR，避免数据污染	需要额外处理，容易出现数据污染问题
Devtools	更好的Devtools集成，方便调试	Devtools集成相对简单
API风格	Composition API风格，更符合Vue 3的趋势	Options API风格
学习曲线	相对平缓	相对陡峭

2.1 模块化：告别臃肿，拥抱清晰

在Vuex中，如果你想要实现模块化，你需要使用modules选项。这会导致你的代码结构变得比较复杂，难以维护。

而在Pinia中，模块化非常简单。每个Store都是独立的，你可以根据你的业务需求，创建多个Store，并将它们组织在一起。

例如，你可以创建一个user.js Store来管理用户相关的信息，再创建一个product.js Store来管理商品相关的信息。这样，你的代码结构就会变得非常清晰。

2.2 TypeScript支持：告别any，拥抱类型安全

Vuex对TypeScript的支持一直是一个痛点。你需要手动定义各种类型，才能获得较好的类型推断。

而Pinia对TypeScript的支持非常优秀。它可以自动推断你的状态、getters和actions的类型，让你告别any，拥抱类型安全。

例如，在上面的counter.js Store中，Pinia可以自动推断出count的类型是number，doubleCount的类型也是number。

2.3 SSR：告别数据污染，拥抱稳定

在SSR场景下，Vuex很容易出现数据污染的问题。这是因为在SSR过程中，所有的用户都会共享同一个Vuex实例。如果一个用户修改了状态，就会影响到其他用户。

而Pinia更好地支持SSR。它通过使用pinia.state.value = {}来重置状态，避免数据污染。

第三部分：迁移实战：从Vuex到Pinia的平滑过渡

好了，理论知识讲了不少，现在咱们来点实际的。咱们来看看如何将一个现有的Vuex项目迁移到Pinia。

3.1 分析你的Vuex代码

首先，你需要分析你的Vuex代码，找出所有的state、getters、mutations和actions。

3.2 创建Pinia Store

然后，你需要为每一个Vuex Module创建一个Pinia Store。

将Vuex Module的state转换为Pinia Store的state。
将Vuex Module的getters转换为Pinia Store的getters。
将Vuex Module的mutations和actions合并为Pinia Store的actions。

3.3 修改组件代码

最后，你需要修改你的组件代码，将对Vuex的调用替换为对Pinia Store的调用。

3.4 示例

假设你有一个Vuex Module如下：

// vuex/modules/user.js
const state = {
  userInfo: null,
}

const getters = {
  isLoggedIn: (state) => !!state.userInfo,
}

const mutations = {
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo
  },
}

const actions = {
  login({ commit }, userInfo) {
    // 模拟登录
    return new Promise((resolve) => {
      setTimeout(() => {
        commit('SET_USER_INFO', userInfo)
        resolve()
      }, 1000)
    })
  },
  logout({ commit }) {
    commit('SET_USER_INFO', null)
  },
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
}

你可以将其转换为以下Pinia Store：

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
  }),
  getters: {
    isLoggedIn: (state) => !!state.userInfo,
  },
  actions: {
    async login(userInfo) {
      // 模拟登录
      await new Promise((resolve) => {
        setTimeout(() => {
          this.userInfo = userInfo
          resolve()
        }, 1000)
      })
    },
    logout() {
      this.userInfo = null
    },
  },
})

在组件中，你可以这样使用：

Vuex (Before)

<template>
  <div>
    <p v-if="$store.getters['user/isLoggedIn']">Welcome, {{ $store.state.user.userInfo.name }}!</p>
    <button v-if="!$store.getters['user/isLoggedIn']" @click="login">Login</button>
    <button v-if="$store.getters['user/isLoggedIn']" @click="logout">Logout</button>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      this.$store.dispatch('user/login', { name: '老码农' })
    },
    logout() {
      this.$store.dispatch('user/logout')
    },
  },
}
</script>

Pinia (After)

<template>
  <div>
    <p v-if="isLoggedIn">Welcome, {{ userStore.userInfo.name }}!</p>
    <button v-if="!isLoggedIn" @click="login">Login</button>
    <button v-if="isLoggedIn" @click="logout">Logout</button>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()

const { isLoggedIn } = storeToRefs(userStore)

const login = async () => {
  await userStore.login({ name: '老码农' })
}

const logout = () => {
  userStore.logout()
}
</script>

注意点:

使用了storeToRefs来解构isLoggedIn，这样可以保持响应式。
直接调用userStore的login和logout方法。

第四部分：Pinia进阶技巧：解锁更多姿势

掌握了Pinia的基本用法，咱们再来学习一些进阶技巧，让你更好地使用Pinia。

4.1 使用$patch批量更新状态

如果你需要批量更新状态，可以使用$patch方法。这可以提高性能，避免多次触发组件的重新渲染。

const userStore = useUserStore()

userStore.$patch({
  name: '老码农',
  age: 30,
  email: '[email protected]',
})

4.2 使用$reset重置状态

如果你需要将状态重置为初始值，可以使用$reset方法。

const userStore = useUserStore()

userStore.$reset()

4.3 订阅状态的变化

你可以使用$subscribe方法来订阅状态的变化。这可以用于实现一些高级功能，例如数据持久化、日志记录等。

const counterStore = useCounterStore()

counterStore.$subscribe((mutation, state) => {
  // mutation 是一个对象，包含以下属性：
  // - type: mutation的类型，例如 'increment'
  // - payload: mutation的payload
  console.log('状态发生了变化', mutation, state)

  // 将状态保存到localStorage
  localStorage.setItem('counter', JSON.stringify(state))
})

4.4 在actions中访问其他Store

你可以在actions中访问其他Store。这可以让你实现更复杂的状态管理逻辑。

import { defineStore } from 'pinia'
import { useUserStore } from './user'

export const useProductStore = defineStore('product', {
  state: () => ({
    products: [],
  }),
  actions: {
    async fetchProducts() {
      const userStore = useUserStore()

      if (!userStore.isLoggedIn) {
        console.warn('用户未登录，无法获取商品列表')
        return
      }

      // 模拟获取商品列表
      await new Promise((resolve) => {
        setTimeout(() => {
          this.products = [
            { id: 1, name: '商品1' },
            { id: 2, name: '商品2' },
          ]
          resolve()
        }, 1000)
      })
    },
  },
})

第五部分：Pinia的局限性与最佳实践

虽然Pinia有很多优点，但它也不是完美的。咱们也来聊聊Pinia的局限性以及一些最佳实践。

5.1 局限性

没有Mutations: 虽然没有Mutations简化了开发，但也意味着你不能像Vuex那样，使用Devtools来回溯状态的变化。不过，Pinia的Devtools集成已经非常强大，可以满足大部分的调试需求。
生态系统不如Vuex: Vuex的生态系统非常成熟，有很多插件和工具可以使用。而Pinia的生态系统还比较新，一些常用的插件可能还没有。

5.2 最佳实践

合理划分Store: 根据业务需求，合理划分Store。避免将所有的状态都放在一个Store中。
使用TypeScript: 尽可能使用TypeScript，以获得更好的类型安全和代码可维护性。
善用Devtools: Pinia的Devtools集成非常强大，可以帮助你调试和优化你的代码。
保持Store的简洁: Store应该只负责状态管理，不要包含过多的业务逻辑。

总结：Pinia，Vue 3状态管理的未来之星

好了，今天的讲座就到这里。希望通过今天的讲解，你已经对Pinia有了更深入的了解，并且能够将其应用到你的Vue 3项目中。

总而言之，Pinia是一个非常优秀的Vue 3状态管理库。它更轻量、更灵活、对TypeScript的支持也更好，而且在SSR方面也更加友好。如果你还在使用Vuex，不妨尝试一下Pinia，相信你会爱上它的！

当然，技术选型没有绝对的对错，只有适合与否。Pinia适合于大多数Vue 3项目，特别是那些需要更好的TypeScript支持和SSR支持的项目。如果你的项目非常简单，或者你对Vuex已经非常熟悉，那么继续使用Vuex也是可以的。

最后，祝大家编程愉快！ Bye Bye!

发表回复 取消回复

发表回复取消回复