还在用vuex?来了解一下pinia
1. 什么是pinia
2.优势
3. 使用 (非常简单)
总结
1. 什么是pinia通俗的讲 :
① vuex精简版 ,而且vue官方更加推荐使用。
②优势又完胜于vuex ,下面我们来了解下pinia。
2.优势pinia 同时支持vue2和vue3 | vue2要用vuex 3 版本 vue3要用vuex 4 版本 |
不分同步异步,更好的ts支持 | 分同步异步,不太兼容ts |
享受自动补全 … | 需要注入,导入函数,调用他们 … |
① 安装
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
总结本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注易知道(ezd.cc)的更多内容!
相关内容
-
win10多任务按键怎么设置在底部详细方法
win10多任务按键怎么设置在底部详细方法,按键,任务,在使用电脑...
-
电脑密码号怎么输入不了|电脑密码号怎么输入不
电脑密码号怎么输入不了|电脑密码号怎么输入不了字母,,电脑密...
-
电脑虚拟键盘快捷键|电脑虚拟键盘快捷键是哪个
电脑虚拟键盘快捷键|电脑虚拟键盘快捷键是哪个,,电脑虚拟键盘...
-
i3/i5的劲敌A8-3870K黑盒版
i3/i5的劲敌A8-3870K黑盒版,,在a6-3670k评价,我们觉得超频系列G...
-
华硕电脑系统win10|华硕电脑系统win10系统
华硕电脑系统win10|华硕电脑系统win10系统,,华硕电脑系统win10...
-
怎么设置电脑桌面|怎么设置电脑桌面壁纸
怎么设置电脑桌面|怎么设置电脑桌面壁纸,,怎么设置电脑桌面壁...
-
电脑测试手机的软件|电脑上测试手机用什么软件
电脑测试手机的软件|电脑上测试手机用什么软件好,,电脑上测试...
-
怎么用麦克风在电脑上唱歌|电脑如何用麦克风唱
怎么用麦克风在电脑上唱歌|电脑如何用麦克风唱歌,,1. 电脑如何...
-
678元的索泰zt-h55d3-m1dh主板
678元的索泰zt-h55d3-m1dh主板,,近日,索泰zt-h55d3-m1dh主板已...
-
键盘上的快捷键截图|电脑键盘上的截图快捷键
键盘上的快捷键截图|电脑键盘上的截图快捷键,,1. 电脑键盘上的...
-
学习写字楼新选择6000元主流配置
学习写字楼新选择6000元主流配置,,这种配置需要考虑双核心的办...
-
电脑麦克风说不了话了|电脑内置麦克风说不了话
电脑麦克风说不了话了|电脑内置麦克风说不了话怎么办,,1. 电脑...
-
硬盘库存迫切需要通过西方数据,三星已经停止向零
硬盘库存迫切需要通过西方数据,三星已经停止向零售商发送硬盘...
-
三千元推荐买什么笔记本电脑,打英雄联盟不卡很流
三千元推荐买什么笔记本电脑,打英雄联盟不卡很流畅,不玩吃鸡,笔...
-
金蝶专业版审核以前期间的单据
金蝶专业版审核以前期间的单据,,1.之前会计是手工做账,现在是...