您好,登錄后才能下訂單哦!
這篇文章主要介紹了JavaScript Pinia代替Vuex的可行性實(shí)例分析的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇JavaScript Pinia代替Vuex的可行性實(shí)例分析文章都會有所收獲,下面我們一起來看看吧。
在 Vue 3.0
出來之前,數(shù)據(jù)存儲的主流依舊是 Vuex
。但是,當(dāng) Vue 3.0
問世后,官方為了迎合 Componsition API
,進(jìn)而設(shè)計(jì)了全新的狀態(tài)管理 Pinia
,而且未來的 Vuex 5
中提及的功能點(diǎn)正是 Pinia
目前已實(shí)現(xiàn)的。
! Vuex 5
提及的功能點(diǎn):
更好的兼容 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),獨(dú)立的 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
npm i pinia@next -S
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')
store/user.js
:
import { defineStore } from 'pinia' export const userStore = defineStore('user', { state: _ => { return { username: '張同學(xué)' } }, getters: { }, actions: { // 重置數(shù)據(jù) _reset() { this.$reset() } } })
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>
let user_store = userStore() /** * @description 修改用戶名稱 */ let update = _ => { user_store.username = '張三' }
let user_store = userStore() /** * @description 修改用戶名稱 */ let update = _ => { user_store.$patch({ username: '張三' }) }
let user_store = userStore() /** * @description 修改用戶名稱 */ let update = _ => { user_store.$patch(state => { state.username = '張三' }) }
let user_store = userStore() /** * @description 修改用戶名稱 */ let update = _ => { user_store.update_username('張三') } // 修改用戶名稱 update_username(value) { this.username = value }
從下面的截圖我看可以看到自身的一些屬性、方法等,諸如:$reset
,$patch
以及熱更新相關(guān)的方法
關(guān)于“JavaScript Pinia代替Vuex的可行性實(shí)例分析”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“JavaScript Pinia代替Vuex的可行性實(shí)例分析”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。