JavaScript Pinia代替 Vuex的可行性分析
一、介紹
在 Vue 3.0
出來之前,數(shù)據(jù)存儲的主流依舊是 Vuex
。但是,當 Vue 3.0
問世后,官方為了迎合 Componsition API
,進而設計了全新的狀態(tài)管理 Pinia
,而且未來的 Vuex 5
中提及的功能點正是 Pinia
目前已實現(xiàn)的。
! Vuex 5
提及的功能點:
- 更好的兼容
Componsition AP
- 更好的支持
TypeScript
- 優(yōu)化
modules
的嵌套結(jié)構(gòu) - 支持熱加載,無需刷新頁面
二、對比
Pinia
與 Vuex
對比:
Pinia
沒有mutations
,且actions
支持同步/異步,Vuex
同步mutations
,異步actions
Pinia
相比Vuex
擁有更好的TypeScript
支持Pinia
不再需要modules
的嵌套結(jié)構(gòu),獨立的store
,扁平化處理得以更好的代碼分割Pinia
支持熱加載,無需重載頁面,保持現(xiàn)有狀態(tài)Pinia
在Vue 3
中支持緩存,而Vuex
則不再支持Pinia
相比Vuex
更加輕量化(體積約為 1K)Pinia
支持$reset
方法,可以初始化state
Pinia
不支持time-travel
功能,相對于Vuex
調(diào)試功能還不成熟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. 創(chuàng)建單個 store
store/user.js
:
import { defineStore } from 'pinia' export const userStore = defineStore('user', { state: _ => { return { username: '張同學' } }, getters: { }, actions: { // 重置數(shù)據(jù) _reset() { this.$reset() } } })
4. 組件內(nèi)引用
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 數(shù)據(jù)的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
數(shù)據(jù)持久化的問題,暫時沒有完美的解決方案,待研究
四、總結(jié)
由于 Pinea
是輕量級的,體積很小,它適合于中小型應用。它也適用于低復雜度的 Vue.js
項目,因為一些調(diào)試功能,如時間旅行和編輯仍然不被支持。未來將 Vuex
用于中小型 Vue.js
項目是過度的,因為它重量級的,對性能有很大影響。因此,Vuex
適用于重量級、高復雜度的 Vue.js
項目。
到此這篇關于JavaScript Pinia代替 Vuex的可行性分析的文章就介紹到這了,更多相關JavaScript Pinia代替 Vuex內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Jquery把獲取到的input值轉(zhuǎn)換成json
本篇文章主要介紹了Jquery把獲取到的input值轉(zhuǎn)換成json的相關知識,具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05JavaScript中數(shù)據(jù)類型轉(zhuǎn)換總結(jié)
在js中,數(shù)據(jù)類型轉(zhuǎn)換分為顯式數(shù)據(jù)類型轉(zhuǎn)換和隱式數(shù)據(jù)類型轉(zhuǎn)換。本文將對此進行介紹,具有一定的參考價值,需要的朋友一起來看下吧2016-12-12Javascript基礎教程之比較null和undefined值
這篇文章主要介紹了Javascript基礎教程之比較null和undefined值的相關知識,非常不錯,具有參考借鑒價值,感興趣的朋友一起學習吧2016-05-05JavaScript使用DeviceOne開發(fā)實戰(zhàn)(一) 配置和起步
這篇文章主要介紹了JavaScript使用DeviceOne開發(fā)實戰(zhàn)(一) 配置和起步的相關資料,需要的朋友可以參考下2015-12-12