Vue 状态管理深入研究：Vuex 和 Pinia 的原理与实践对比

// Vuex 和 Pinia 状态管理库的示例代码对比
 
// Vuex 示例
import Vuex from 'vuex';
import Vue from 'vue';
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});
 
// Pinia 示例
import { defineStore } from 'pinia';
import { createPinia } from 'pinia';
 
const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    },
  },
});
 
const pinia = createPinia();
 
// 在 Vue 应用中使用
const app = createApp(App);
app.use(pinia);

这个示例展示了如何在Vue应用中设置和使用Vuex和Pinia状态管理库。Vuex使用传统的state、mutations、actions模式，而Pinia采用更现代的Composition API风格，通过定义store来管理状态。在实际应用中，开发者可以根据项目需求和偏好选择合适的状态管理库。