Pinia基本概念

面试题：Pinia 相比 Vuex 有什么样的优点？为什么现在官方推荐使用 Pinia ？

Pinia，是一个 Vue 阵营的新的状态管理库，现在 Vue 官方已经推荐使用 Pinia 来代替 Vuex，或者你可以把 Pinia 看作是 Vuex 的最新的版本。

Pinia 的基本介绍
Pinia 优势

Pinia 的基本介绍

Pinia 是一个西班牙语的单词，表示“菠萝”的意思。因为菠萝是由一小块一小块组成的，这个和 Pinia 的思想就非常的吻合，在 Pinia 中，每个 Store 仓库都是单独的扁平化的存在的。

Pinia 是由 Vue 官方团队中的一个成员开发的，最早是在 2019 年 11 左右作为一项实验性工作所提出的，当时的目的是将组合 API 融入到 Vuex 中，探索新版本的 Vuex 应有的形态，随着探索的进行，最终发现 Pinia 已经实现了 Vuex5 大部分的提案，因此 Pinia 就作为了最新版本的 Vuex，但是为了尊重作者本人，名字保持不变，仍然叫做 Pinia。

相比 Vuex，Pinia 的 API 更少而且更简单，还支持组合式 API，还可以和 Typescript 一起使用来做类型的推断。

pinia 官网：https://pinia.vuejs.org/

Pinia 优势

在 Pinia 中，已经不存在 mutations，只有 state、getters、actions

import { defineStore } from 'pinia'

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

在上面的代码中，我们创建了一个仓库，该仓库中提供三个选项，分别是 state、getters 以及 actions。

actions 里面支持同步和异步来修改 store，相当于将之前 Vuex 中的 mutation 和 action 合并了

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  // ...
  actions: {
    // 同步的修改仓库状态
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
    // 异步的修改仓库状态
    async incrementAsync() {
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.increment()
    },
    async decrementAsync() {
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.decrement()
    }
  }
})

可以和 TypeScript 一起使用，以此来获得类型推断的支持

import { defineStore } from 'pinia'

// 这里定义了一个名为 Todo 的接口
interface Todo {
  id: number;
  text: string;
  done: boolean;
}

export const useTodoStore = defineStore({
  id: 'todo',
  state: () => ({
    todos: [] as Todo[],
  }),
  getters: {
    completedTodos: state => state.todos.filter(todo => todo.done),
  },
  actions: {
    // text 指定了是 string 类型
    addTodoItem(text: string) {
      const id = state.todos.length + 1
      const newTodo = { id, text, done: false }
      state.todos.push(newTodo)
    },
    // todo 指定了是 Todo 类型
    toggleTodoItem(todo: Todo) {
      todo.done = !todo.done
    },
    async fetchTodos() {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos')
      const todos = await response.json() as Todo[]
      state.todos = todos
    },
  },
})

关于 Store 仓库，每一个 Store 仓库都是独立的扁平化的存在的，不再像 Vuex 里面是通过 modules 嵌套
支持插件扩展，可以通过插件（函数）来扩展仓库的功能，为仓库添加全局属性或者全局方法

// ...
// 这里定义了一个名为 localStoragePlugin 的插件，本质上就是一个函数
const localStoragePlugin = (context: PiniaPluginContext) => {
  const key = 'my-app-state'

  // 从 localStorage 中恢复状态
  context.state = localStorage.getItem(key) || context.state

  // 监听 state 变化，将变化保存到 localStorage
  context.subscribe((mutation) => {
    localStorage.setItem(key, context.state)
  })
}
// ...

// 创建 Pinia 实例，并注册 localStoragePlugin 插件
const pinia = createPinia()
pinia.use(localStoragePlugin)

更加轻量，压缩之后体积只有 1kb 左右，基本上可以忽略这个库的存在

真题解答

题目：Pinia 相比 Vuex 有什么样的优点？为什么现在官方推荐使用 Pinia ？

参考答案：

Pinia 是由 Vue.js 团队成员开发的下一代状态管理仓库，相比 Vuex 3.x/4.x，Pinia 可以看作是 Vuex5 版本。

Pinia 具有如下的优势：

mutations 不复存在。只有 state 、getters 、actions。

actions 中支持同步和异步方法修改 state 状态。

与 TypeScript 一起使用具有可靠的类型推断支持。

不再有模块嵌套，只有 Store 的概念，Store 之间可以相互调用。

支持插件扩展，可以非常方便实现本地存储等功能。

更加轻量，压缩后体积只有 1kb 左右。