还在用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();        //调用创建piniacreateApp(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:{},  //相当于全局的computedactions:{}   //相当于全局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'export default {created(){const pinia = PiniaStore();}}
</script>

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

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

还在用vuex吗，pinia(菠萝头)才香相关推荐

OSChina 周一乱弹 ——生死之际还能从容装逼，先生大才
2019独角兽企业重金招聘Python工程师标准>>> @Outlooks : 电台里,主持人接到一个听众的电话. 听众:我刚刚在麦当劳门口捡到一个钱包,里面有五千多元钱. 主持人: ...
苹果天气不显示_苹果手机闹钟还能检测手机真假！直到今天才发现，这些功能真好用...
阅读本文前,请您先点击上面蓝色字体"财经史"再点击"关注",这样您就可以免费收到我们的最新内容了,每天都会有更新,完全是免费订阅,请放心关注. 注:本文转载自网 ...
vue vuex和pinia（菠萝）的区别
pinia(菠萝)的优点 Vue2和Vue3都支持,这让我们同时使用Vue2和Vue3的小伙伴都能很快上手. pinia中只有state.getter.action,抛弃了Vuex中的Mutation ...
还有人没尝过 Pinia 吗，请收下这份食用指南！
前言 Pinia ,发音为 /piːnjʌ/,来源于西班牙语 piña .意思为菠萝,表示与菠萝一样,由很多小块组成.在 Pinia 中,每个 Store 都是单独存在,一同进行状态管理. Pinia ...
下一代Vuex（Pinia）不学你就out了
为什么说不学Pinia你就out了. Pinia是下一代Vue状态管理库,在Vue-cli中已经替换了原来的Vuex,且同时支持Vue2.0和Vue3.0两个大版本.Pinia简化了状态管理,抛弃了V ...
Vuex与Pinia的使用与其持久化以及两者之间的差别
vuex在vue3的简单使用 index.js文件import { createStore } from 'vuex' export default createStore({state: {num: ...
线程可以kill吗_还在用 kill -9 停机？这才是最优雅的姿势
来源公众号Kirito的技术分享 , 作者徐靖峰最近瞥了一眼项目的重启脚本,发现运维一直在使用 kill-9 的方式重启 springboot embedded tomcat,其实大家几乎一致认为: ...
还担心35岁失业嘛？这才是程序员的职业规划
龙珠悟空,一个写故事的程序员 <小白学java>第三章:初始java白月光,窥见java之美(二) 序言:"我们都是阴沟里的虫子,但总还是得有人仰望星空" ---< ...
苹果确认不会放弃Touch ID，iPhone 11还没发布就火爆一片，真是香啊
1 苹果不放弃Touch ID 苹果Touch ID推动了智能手机指纹识别的普及,但自从iPhone X之后,苹果就采用Face ID人脸识别取而代之了,未来Touch ID会消失吗?答案是否定的. ...
真无线蓝牙耳机你还在选上千的国外品牌吗？这几款平价高性能蓝牙耳机才香！
每一年的双11不仅仅是败家娘们的专利,钢铁直男们剁起手来丝毫不亚于巾帼英雄们.当然直男们最喜爱的莫过于数码设备了.根据相关统计,男同胞们在数码设备中尤其是已音频外设居多,高音质的耳机自然跑不了呢.而游 ...

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

1. 什么是pinia

2.优势

3. 使用（非常简单）

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

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

还在用vuex吗，pinia(菠萝头)才香相关推荐

最新文章

热门文章

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

1. 什么是pinia

2.优势

3. 使用 （非常简单）

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

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

还在用vuex吗，pinia(菠萝头)才香相关推荐

最新文章

热门文章

3. 使用（非常简单）

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