vue的狀態(tài)庫管理實(shí)現(xiàn)示例
Vuex 和 Pinia 均是 Vue.js 的狀態(tài)管理庫，它們?yōu)?Vue 應(yīng)用程序提供了一種集中式的、可預(yù)測的狀態(tài)管理解決方案。
Vuex 是 Vue.js 官方推薦的狀態(tài)管理庫之一。它的核心概念包括 state、mutation、action 和 getter。其中，state 代表應(yīng)用程序的狀態(tài)數(shù)據(jù)，在 Vuex 中存儲(chǔ)為唯一的來源，mutation 用于修改狀態(tài)數(shù)據(jù)并確保數(shù)據(jù)變化的可追蹤性，action 用于處理異步操作或組合多個(gè) mutation 操作，getter 可以讓我們對 state 進(jìn)行計(jì)算和派生，并使其變得更加易于訪問。一個(gè) Vuex store 實(shí)例是一個(gè)全局 JavaScript 對象，可以在所有組件中通過注入來進(jìn)行訪問和操作。
安裝、引入Pinia
安裝：npm install pinia 或 yarn add pinia引入注冊：
Vue3的引入方法main.
app.vue
<template>
<div>pinia-current：{{ Test.current }}</div>
<div>pinia-name：{{ Test.name }}</div>
</template>
<script setup lang="ts">
import { useTestStore } from "./store";
const Test = useTestStore();
</script>
<style lang="scss" scoped></style>
批量修改工廠函數(shù)形式
推薦使用函數(shù)形式 可以自定義修改邏輯
<template>
<div>pinia-current：{{ Test.current }}</div>
<div>pinia-name：{{ Test.name }}</div>
<div style="display: flex; flex-direction: column">
<button @click="funChange">工廠函數(shù)實(shí)現(xiàn)批量change</button>
</template>
<script setup lang="ts">
import { useTestStore } from "./store";
const Test = useTestStore();
const funChange = () => {
Test.$patch((state) => {
(state.current = 999), (state.name = "小3");
});
};
</script>
<style lang="scss" scoped></style>到此這篇關(guān)于vue的狀態(tài)庫管理實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue 狀態(tài)庫管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目預(yù)覽excel表格功能(file-viewer插件)
這篇文章主要介紹了vue項(xiàng)目預(yù)覽excel表格功能(file-viewer插件),本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了vue-property-decorator的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
在項(xiàng)目中經(jīng)常會(huì)復(fù)用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時(shí)將它們設(shè)為全局的就顯得很重要了,下面這篇文章主要給大家介紹了關(guān)于vue如何定義全局變量和全局方法的相關(guān)資料,需要的朋友可以參考下2023-04-04
Vue3時(shí)間軸組件問題記錄(時(shí)間信息收集組件)
本文介紹了如何在Vue3項(xiàng)目中封裝一個(gè)時(shí)間信息收集組件,采用雙向綁定響應(yīng)式數(shù)據(jù),通過對Element-Plus的Slider組件二次封裝,實(shí)現(xiàn)時(shí)間軸功能,解決了小數(shù)計(jì)算導(dǎo)致匹配問題和v-model綁定組件無效問題,感興趣的朋友跟隨小編一起看看吧2024-09-09
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲(chǔ) key/value 對的數(shù)據(jù),localStorage 用于長久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時(shí)間,直到手動(dòng)去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧2023-12-12
springboot+VUE實(shí)現(xiàn)登錄注冊
這篇文章主要為大家詳細(xì)介紹了springboot+VUE實(shí)現(xiàn)登錄注冊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要為大家詳細(xì)介紹了vue路由嵌套的SPA實(shí)現(xiàn)步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
解決vue中使用swiper插件問題及swiper在vue中的用法
Swiper是純javascript打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。這篇文章主要介紹了解決vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Vue集成Iframe頁面的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例
今天小編就為大家分享一篇使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09