vue3使用Pinia进行全局状态管理，Pinia安装和使用，Pinia 和 Vuex的对比

// 安装 Pinia
// 在项目中通过npm或yarn安装Pinia
npm install pinia
// 或者
yarn add pinia
 
// 创建 Pinia Store
// 在src目录下创建一个store文件夹，并添加一个index.js文件
// store/index.js
import { defineStore } from 'pinia'
 
export const useMainStore = defineStore('main', {
  state: () => {
    return { counter: 0 }
  },
  actions: {
    increment() {
      this.counter++
    }
  }
})
 
// 安装 Pinia 到 Vue 应用中
// 在main.js中引入并使用pinia
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
 
const app = createApp(App)
const pinia = createPinia()
 
app.use(pinia)
app.mount('#app')
 
// 在组件中使用 Pinia Store
// 在任何组件中，可以这样使用Pinia Store
// MyComponent.vue
<template>
  <div>{{ counter }}</div>
  <button @click="increment">Increment</button>
</template>
 
<script>
import { useMainStore } from '@/store'
 
export default {
  setup() {
    const mainStore = useMainStore()
    return {
      counter: mainStore.counter,
      increment: mainStore.increment
    }
  }
}
</script>

Pinia和Vuex的对比：

• Pinia是为了解决Vuex在Vue3中的局限性而生的，它可以更灵活地管理状态。
• Pinia不再使用模块的概念，而是直接定义store，这样可以避免在Vue3中使用Vuex时出现的一些问题。
• Pinia使用Composition API来定义store，这使得代码更加简洁和符合现代前端开发的范式。
• Pinia可以更好地支持Vue3的新特性，如Provides和Inject，使得状态管理更加自然地融合到Vue的依赖注入系统中。