亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue的狀態(tài)庫管理實(shí)現(xiàn)示例

 更新時(shí)間：2024年04月09日 08:28:11   作者：她說她一如既往的愛我  
Vuex 是 Vue.js 官方推薦的狀態(tài)管理庫之一，本文主要介紹了vue的狀態(tài)庫管理實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下

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 可以讓我們對(duì) state 進(jìn)行計(jì)算和派生，并使其變得更加易于訪問。一個(gè) Vuex store 實(shí)例是一個(gè)全局 JavaScript 對(duì)象，可以在所有組件中通過注入來進(jìn)行訪問和操作。

安裝、引入Pinia

安裝：npm install pinia 或 yarn add pinia引入注冊(cè)：
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

相關(guān)文章

最新評(píng)論