<>1. 什么是pinia

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

<>2.优势

pinavuex
pinia 同时支持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' //导入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写法:
<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

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

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信