还在用vuex吗，pinia(菠萝头)才香

1. 什么是pinia

通俗的讲 ：
① vuex精简版 ，而且vue官方更加推荐使用。
②优势又完胜于vuex ，下面我们来了解下pinia。

2.优势

pina

vuex

pinia 同时支持vue2和vue3

vue2要用vuex 3 版本
vue3要用vuex 4 版本

不分同步异步，更好的ts支持

分同步异步，不太兼容ts

享受自动补全
…

需要注入，导入函数，调用他们
…

3. 使用 （非常简单）

① 安装

npm install pinia

②在 main.js 中 加入

import { createApp } from 'vue'
import App from './App.vue'

import { createPinia } from 'pinia'  //导入pinia
const  pinia = createPinia();        //调用创建pinia

createApp(App)
			.use(pinia)
			.mount('#app')

③去创建 pinia 仓库
一般选在 /src下的 store 文件夹下 例：创建为 pinia.js
/src/store/pinia.js 为：

import { defineStore } from 'pinia'

export const PiniaStore = defineStore('main',{  //导出 pinia仓库
    state:() => { //相当于全局的 data()
        return {
            name:'张三',
            age:18
        }
    },
    getters:{},  //相当于全局的computed
    actions:{}   //相当于全局methods
})

③使用 （非常容易）
以/src/view/index.vue 为例：
Vue3写法：

Vue2写法：

大家不用担心用pinia会出问题 ，官方已经明确说了pinia是vuex 5版本的理念，而且官方更推荐pinia而非vuex

如果还有其他问题，咋们评论区见，对于一个刚毕业入坑前端的同学，摸鱼时间非常多哦，又问必回哦！