1. 什么是pinia
通俗的讲 : ① vuex精简版 ,而且vue官方更加推荐使用。 ②优势又完胜于vuex ,下面我们来了解下pinia。
2.优势① 安装
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 ??如果还有其他问题,咋们评论区见,对于一个刚毕业入坑前端的同学,摸鱼时间非常多哦,又问必回哦!
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #还在用vuex吗 #pinia菠萝头才香 #pinia #VS #vuex