• Pinia能否替代 Vuex成为更强大的状态管理工具
  • 发布于 2个月前
  • 280 热度
    0 评论
前序
Pinia 是 Vue.js 团队成员专门为 Vue 开发的一个全新的状态管理库,也相当于vuex5,下面关于vuex5的提案是不是觉得很像

Vuex5 的提案

Pinia和Vuex的函数
Vuex: State、Getters、Mutations(同步)、Actions(异步)
Pinia: State、Getters、Actions(同步异步都支持)
vuex的最新版为4.x
  .vuex4对标vue3的使用
  .vuex3对标vue2的使用
pinia的最新版为2.x
  .适用vue2也支持vue3

区别
 .pinia 没有 mutations,actions的使用不同(pinia支持同步异步),getters的使用是一致的
 .pinia 没有总出口全是模块化,需要定义模块名称,当多个模块需要协作的时候需要引入多个模块,vuex是有总出口的,在使用模块化的时候不需要引入多个模块
 .pinia 在修改状态的时候不需要通过其他api,vuex需要通过commit,dispatch去修改

pinia的安装和使用
安装 Pinia
使用 npm 或 yarn 安装 Pinia:
npm install pinia
# 或者
yarn add pinia
创建 Pinia Store
在你的项目中创建一个 Pinia store,可以通过创建一个 .ts 文件来实现。例如,你可以创建一个名为 store.ts 的文件:
import { defineStore } from 'pinia';
//  堆代码 duidaima.com
export const useMyStore = defineStore('myStore', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
  },
});
在这个示例中,我们创建了一个名为 myStore 的 Pinia store,其中包含一个状态变量 count、一个 getter doubleCount 和一个 action increment。

注册 Pinia
在你的应用程序的入口文件中(通常是 main.ts),注册 Pinia:
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';

const app = createApp(App);
const pinia = createPinia();
app.use(pinia);

app.mount('#app');
在 Vue 组件中使用 Pinia Store
在你的 Vue 组件中引入 useMyStore 并使用它来访问状态、调用操作等:
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useMyStore } from './store';

export default defineComponent({
  setup() {
    const myStore = useMyStore();

    const count = myStore.count;
    const doubleCount = myStore.doubleCount;

    const increment = () => {
      myStore.increment();
    };

    return { count, doubleCount, increment };
  },
});
</script>
vuex和pinia的优缺点
Pinia 的优点
.Pinia 允许你在不重新加载页面的情况下修改你的商店。
.Pinia 是为 TypeScript 设计的,提供了强类型支持,可以在开发过程中捕获更多的错误,使代码更具可维护性和可读性。
.Pinia 提供 devtool 支持,这有助于增强开发人员使用该工具的体验。
.pinia中只有state、getter、action,抛弃了Vuex中的Mutation
.无需再创建各个模块嵌套了,Vuex中如果数据过多,我们通常分模块来进行管理,而pinia中每个store都是独立的,互相不影响
.体积非常小,只有1KB左右
.pinia支持插件来扩展自身功能
.支持服务端渲染
.Pinia 兼容 Vue 2 和 Vue 3。

Pinia 的缺点
.与 Vuex 相比,它没有庞大的社区支持和解决方案。
.Pinia 不支持调试功能,如时间旅行和编辑。

Vuex 的优点
.Vuex 有 mutations、getters 和 actions。
.与 Pinia 相比,Vuex 的社区支持很大。
.Vuex 支持调试功能,如时间旅行和编辑。

Vuex 的缺点
.它对 TypeScript 不友好。
.你只能将其用于大型 SPA。

实现本地存储
安装插件
需要安装 pinia-plugin-persist 插件和 Pinia:
npm install pinia pinia-plugin-persist
# 或者
yarn add pinia pinia-plugin-persist
创建 Pinia Store
创建一个 Pinia store,用于管理需要持久化的状态。
// store.js
import { defineStore } from 'pinia';
import { usePersist } from 'pinia-plugin-persist';

export const useMyStore = defineStore({
  id: 'myStore',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

// 使用插件进行状态持久化
usePersist(useMyStore, {
  // 配置选项
  // 默认存储在 localStorage
  // 如果需要使用 sessionStorage,可以指定 storage: 'sessionStorage'
  key: 'myStore', // 存储的键名
  // 可以添加更多配置选项,例如过期时间
});
使用 pinia-plugin-persist 插件,你可以轻松实现状态的持久化,无需手动处理本地存储。你可以根据需要配置更多的选项,例如设置过期时间或自定义存储键。这有助于简化状态管理和数据的持久化工作。

vuex和pinia的选择场景
Pinea是轻量级的,体积很小,它适合于中小型应用。它也适用于低复杂度的Vue.js项目,因为一些调试功能,如时间旅行和编辑仍然不被支持。Vuex 用于中小型 Vue.js 项目是过度的,因为它重量级的,对性能降低有很大影响。因此,Vuex 适用于大规模、高复杂度的 Vue.js 项目
用户评论