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

1. 什么是pinia

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

2.优势

pinavuexpinia 同时支持vue2和vue3vue2要用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'//导入piniaconst  pinia =createPinia();//调用创建piniacreateApp(App).use(pinia).mount('#app')

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

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

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

<template><h3>{{pinia.name}}</h3><!--使用--><h3>{{pinia.age}}</h3><button @click="pinia.age++">修改pinia数据</button><!--修改--></template><script setup>import{ PiniaStore }from'../../store/pinia'const pinia =PiniaStore();</script>

Vue2写法：

<template><div><h3>{{pinia.name}}</h3><h3>{{pinia.age}}</h3><button @click="pinia.age++">修改pinia数据</button></div></template><script>import{ PiniaStore }from'../../store/pinia'exportdefault{created(){const pinia =PiniaStore();}}</script>

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

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