JavaScript Pinia代替 Vuex的可行性分析
一、介紹
在 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
項目。
到此這篇關於JavaScript Pinia代替 Vuex的可行性分析的文章就介紹到這瞭,更多相關JavaScript Pinia代替 Vuex內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!