Pinia 是否可以代替 Vuex ？

Vue3状态管理：Pinia vs Vuex

原创已于 2022-07-28 09:30:38 修改 · 638 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2022-07-27 18:04:40 首次发布

Javascript 同时被 2 个专栏收录

52 篇文章

订阅专栏

Vue

29 篇文章

订阅专栏

本文对比了Vue3的状态管理库Pinia与Vuex，Pinia没有mutations，支持同步/异步actions，更好的TypeScript支持，更简单的模块结构，热加载功能，并在Vue3中支持缓存。它适合中小型应用，而Vuex适用于高复杂度项目。 Pinia的使用包括安装、注册、创建store、组件引用及数据更新方法。

文章目录

一、介绍

在 Vue 3.0 出来之前，数据存储的主流依旧是 Vuex。但是，当 Vue 3.0 问世后，官方为了迎合 Componsition API，进而设计了全新的状态管理 Pinia，而且未来的 Vuex 5 中提及的功能点正是 Pinia 目前已实现的。

! Vuex 5 提及的功能点：

更好的兼容 Componsition AP
更好的支持 TypeScript
优化 modules 的嵌套结构
支持热加载，无需刷新页面

二、对比

`Pinia` 与 `Vuex` 对比：

Pinia 没有 mutations，且 actions 支持同步/异步，Vuex 同步 mutations，异步 actions
Pinia 相比 Vuex 拥有更好的 TypeScript 支持
Pinia 不再需要 modules 的嵌套结构，独立的 store，扁平化处理得以更好的代码分割
Pinia 支持热加载，无需重载页面，保持现有状态
Pinia 在 Vue 3 中支持缓存，而 Vuex 则不再支持
Pinia 相比 Vuex 更加轻量化(体积约为 1K)
Pinia 支持 $reset 方法，可以初始化 state
Pinia 不支持 time-travel 功能，相对于 Vuex 调试功能还不成熟
Pinia 同样也支持 Vue 2.0

三、使用

1. 安装

npm i pinia@next -S

2. 注册

index.js：

import { createApp } from 'vue'
import element from 'element-plus'
import '@/assets/css/index.css'
import router from '@/router/index'
import App from './App'
import { createPinia } from 'pinia'

const app = createApp(App)

app.use(element).use(router).use(createPinia()).mount('#root')

3. 创建单个 `store`

store/user.js：

import { defineStore } from 'pinia'

export const userStore = defineStore('user', {
  state: _ => {
    return {
      username: '张同学'
    }
  },
  getters: {

  },
  actions: {
    // 重置数据
    _reset() {
      this.$reset()
    }
  }
})

4. 组件内引用

Home.vue：

<template>
  <div>
    姓名：{{ user_store.username }}
    <br />
    <el-button @click="change_username">修改名称</el-button>
    <el-button @click="user_store._reset()">重置</el-button>
  </div>
</template>

<script>
import { userStore } from '../store/user'

export default {
  setup() {
    let user_store = userStore() // 初始化 user_store
    
    return { user_store }
  }
}
</script>

5. 更新 `store` 数据的4种方式

(1)：直接修改特定的值

let user_store = userStore()

/**
 * @description 修改用户名称
 */
let update = _ => {
  user_store.username = '张三'
}

(2)：利用 `$patch` 批量修改

let user_store = userStore()

/**
 * @description 修改用户名称
 */
let update = _ => {
  user_store.$patch({
  	username: '张三' 
  })
}

(3)：利用 `$patch` 单个修改特定的值

let user_store = userStore()

/**
 * @description 修改用户名称
 */
let update = _ => {
  user_store.$patch(state => {
    state.username = '张三'
  })
}

(4)：利用 `Actions` 修改

let user_store = userStore()

/**
 * @description 修改用户名称
 */
let update = _ => {
  user_store.update_username('张三')
}

// 修改用户名称
update_username(value) {
  this.username = value
}

6. 其他

从下面的截图我看可以看到自身的一些属性、方法等，诸如：$reset，$patch 以及热更新相关的方法

关于 Pinia 数据持久化的问题，暂时没有完美的解决方案，待研究

四、总结

由于 Pinea 是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的 Vue.js 项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。未来将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能有很大影响。因此，Vuex 适用于重量级、高复杂度的 Vue.js 项目。