在 Vue 3 中，常见的状态管理库有 Pinia 和 Vuex 4，下面分别介绍如何使用这两个库来更新虚拟 DOM。
使用 Pinia 更新虚拟 DOM
1. 安装 Pinia
首先，确保你已经安装了 Pinia，可以使用 npm 或 yarn 进行安装：
npm install pinia
# 或者
yarn add pinia
2. 创建 Store
在项目中创建一个 Pinia store，用于管理应用的状态。以下是一个简单的示例：
// stores/counter.js
import {
defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++;
}
}
});
3. 在组件中使用 Store
在组件中引入并使用创建好的 store，当 store 中的状态发生变化时，会自动触发组件的重新渲染，从而更新虚拟 DOM。
<template>
<div>
<p>{
{ counterStore.count }}</p>
<button @click="counterStore.increment">Increment</button>
</div>
</template>
<script setup>
import { useCounterStore } from '../stores/counter';
const counterStore = useCounterStore();
</script>
在上述示例中，当点击按钮调用 increment 方法时，count 状态会发生变化，Pinia 会通知所有依赖该状态的组件进行重新渲染，从而更新虚拟 DOM。
使用 Vuex 4 更新虚拟 DOM
1. 安装 Vuex 4
同样，先安装 Vuex 4，可以使用 npm 或 yarn：
npm install vuex@next
# 或者
yarn add vuex@next
2. 创建 Store
创建一个 Vuex store，定义状态和 mutations 来修改状态。
// stores/index.js
import {
createStore } from 'vuex';
const store = createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
}
});
export default store;
3. 在项目中使用 Store
在项目的入口文件中引入并使用创建好的 store。
// main.js
import {
createApp } from 'vue';
import App from './App.vue';
import store from './stores/index';
const app = createApp(App);
app.use(store);
app.mount('#app');
4. 在组件中使用 Store
在组件中使用 mapState 和 mapMutations 辅助函数来获取状态和调用 mutations，当状态发生变化时，会更新虚拟 DOM。
<template>
<div>
<p>{
{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['count'])
},
methods: {
...mapMutations(['increment'])
}
};
</script>
在 Vue 3 的 <script setup> 语法中，可以使用 useStore 函数来使用 store：
<template>
<div>
<p>{
{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script setup>
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const count = computed(() => store.state.count);
const increment = () => store.commit('increment');
</script>
当点击按钮调用 increment 方法时，count 状态会发生变化，Vuex 会通知所有依赖该状态的组件进行重新渲染，进而更新虚拟 DOM。
综上所述，无论是 Pinia 还是 Vuex 4，都是通过管理应用的状态，当状态发生变化时通知组件重新渲染，从而实现虚拟 DOM 的更新。
