pinia(菠萝)

1. 什么是pinia

• vuex精简版 ，而且vue官方更加推荐使用。
• 优势又完胜于vuex ，下面我们来了解下pinia。

2.优势

• pinia是整合了vuex5提案的所有功能点，所以说pinia就是Vuex5也不为过
• Vuex3中使用Vuex4，并且还只能作为一个过度的选择存在很大的隐患，所以在 Componsition API 诞生之后，也就设计了全新的状态管理 Pinia

Pinia 和 Vuex
Vuex： State、Gettes、Mutations(同步)、Actions(异步)
Pinia： State、Gettes、Actions(同步异步都支持)

3. 使用

1. 安装

   npm install pinia

2. 在main.js中加入

   import App from './App.vue';
   import router from './router';
   import { createApp } from 'vue';
   import Antd from 'ant-design-vue';
   import 'ant-design-vue/dist/antd.css';
   import { createPinia } from 'pinia';//导入pinia
   const pinia = createPinia();//调用创建pinia
   createApp(App).use(Antd).use(pinia).use(router).mount('#app')

3. 去创建pinia仓库(创建/src/store/pinia.js)

   import { defineStore } from 'pinia';
   export const PiniaStore = defineStore('main', {  //导出 pinia仓库
     state: () => { //相当于全局的 data()
       return {
         name: '逸尘',
         age: 21
       }
     },
     getters: {},  //相当于全局的computed
     actions: {}   //相当于全局methods
   })

4. 使用