JavaScriptPinia代替Vuex的可行性分析

目录

一、介绍

二、对比

三、使用

1. 安装

2. 注册

3. 创建单个 store

4. 组件内引用

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

(1)直接修改特定的值

(2)利用 $patch 批量修改

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

(4)利用 Actions 修改

6. 其他

四、总结

一、介绍

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

! Vuex 5 提及的功能点:

更好的兼容 Componsition AP

更好的支持 TypeScript

优化 modules 的嵌套结构

支持热加载,无需刷新页面

二、对比

PiniaVuex 对比:

Pinia 没有 mutations,且 actions 支持同步/异步,Vuex 同步 mutations,异步 actions

Pinia 相比 Vuex 拥有更好的 TypeScript 支持

Pinia 不再需要 modules 的嵌套结构,独立的 store,扁平化处理得以更好的代码分割

Pinia 支持热加载,无需重载页面,保持现有状态

PiniaVue 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 项目。

到此这篇关于JavaScript Pinia代替 Vuex的可行性分析的文章就介绍到这了,更多相关JavaScript Pinia代替 Vuex内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    从vuex开始了解Vue

    从vuex开始了解Vue,从,vuex,开始,了解,Vue,从,vuex,开始,了解,Vue,是,,从vuex开始了解Vuevuex是专门帮助vue管理的一个js库,利用了vue.js中

    vue.js如何安装vuex?

    vue.js如何安装vuex?下面本篇文章给大家介绍一下在vue.js中安装和使用vuex的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家

    vuex属性state、mutations、actions之间的关系是什么?

    下面本篇文章给大家介绍一下vuex属性 state、mutations、actions之间的关系。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所

    vuex刷新页面数据丢失怎么解决?

    vuex刷新页面数据丢失怎么解决?下面本篇文章给大家介绍一下vuex页面刷新数据丢失问题的解决方法。有一定的参考价值,有需要的朋友可以参考

    vuex什么时候使用?

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测

    vuex的五个核心属性是什么?

    VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。Vue

    什么情况使用vuex?

    vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以

    vuex是用来干嘛的?

    vuex是什么?是用来干嘛的?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,是基于vue框架的一个状态管理库。它采用集中式存储管理应用

    什么时候使用vuex?

    什么时候使用vuex?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。组件通信在使用Vue进行

    vuex有什么用?

    vuex是什么?有什么用?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。vuex是什么?有什么用?Vu

    Vuex中状态管理器的使用详解

    Vuex中状态管理器的使用详解目录一、Vuex是什么?二、什么时候使用Vuex三、Vuex的核心概念和API四、应用举例五、vuex中各种辅助函数的用

    Vuex数据的存储与获取方式

    Vuex数据的存储与获取方式目录Vuex数据存储与获取以下示例引用自官网(开始 | Vuex)可以举一个实际应用的例子Vuex存值与取值(简单易懂)Vue