为什么使用vuex,vuex的

　　本文主要详细介绍皮尼亚。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

　　:

目录

　　 1.pinia2是什么？优点3。使用(非常简单的)总结

1. 什么是pinia

　　通俗的讲 ：

　　vuex的简化版，Vue官方更推荐。

　　优势优于vuex。我们来看看皮尼亚。

2.优势

　　Pinavuexpinia同时支持vue2和vue3vue2，需要vuex 3版本。

　　不管同步和异步，Vue3都应该使用vuex 4版本。更好的ts支持同步和异步，不太兼容的ts享受自动完成。

　　…需要注入、导入函数并调用它们

　　…

3. 使用 （非常简单）

　　 安装

　　npm安装pinia

　　在 main.js 中 加入

　　从“vue”导入{ createApp }

　　从导入应用程序。/App.vue

　　从“pinia”//Import pinia导入{createpinia}

　　const pinia=create pinia()；//调用创建pinia

　　创建应用程序。使用(皮尼亚)。挂载(#app)

　　去创建 pinia 仓库

　　一般选择/src下的存储文件夹。示例：将其创建为pinia.js

　　/src/store/pinia.js是：

　　从“pinia”导入{ defineStore }

　　export const piniastore=definestore( main ，{//export pinia warehouse

　　State:()={//相当于全局数据()

　　返回{

　　姓名：张三，

　　年龄：18岁

　　}

　　},

　　Getters:{}，//相当于全局计算

　　操作：{} //相当于全局方法

　　})

　　使用 （非常容易）

　　以/src/view/index.vue为例：

　　Vue3写法：

　　模板

　　h3{{pinia.name}}/h3！-使用-

　　h3{{pinia.age}}/h3

　　Button @click=pinia.age 修改pinia数据/button！-修改-

　　/模板

　　脚本设置

　　从导入{ PiniaStore }././store/pinia

　　const pinia=PiniaStore()；

　　/脚本

　　Vue2写法：

　　模板

　　差异

　　h3{{pinia.name}}/h3

　　h3{{pinia.age}}/h3

　　Button @click=pinia.age 修改pinia数据/button

　　/div

　　/模板

　　脚本

　　从导入{ PiniaStore }././store/pinia

　　导出默认值{

　　created(){ const pinia=PiniaStore()；}

　　}

　　/脚本

　　不用担心皮尼亚的问题。官方已经明确表示pinia是vuex 5版的概念，官方推荐pinia而不是VUEX。

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。