vue如何实现状态管理,vue简单状态管理

　　Pinia不仅支持Vue3，还支持Vue2。本文主要介绍了Vue新的状态管理库Pinia的入门课程，具有一定的参考价值。有兴趣的可以了解一下。

前沿

　　Vue官方推荐的状态管理库是Vuex，那么为什么最近Pinia开始流行了呢？主要原因是Vue3推出的时候，Vuex并没有很好的支持Vue3的组合Api，也就是这个时候出现了Pinia。最重要的是，Pinia不仅支持Vue3，还支持Vue2，太神奇了。而且Vuex5的最新功能还是参考Pinia。

使用教程

　　https://pinia.vuejs.org/,官方网站

　　Github地址：https://github.com/vuejs/pinia

1、安装

　　npm安装pinia -S

2、vue中引入

　　//在vue3中引入并使用

　　从“Pinia”导入{ createPinia }

　　app.use(createPinia())

　　//在//Vue2中引入和使用

　　从“Pinia”导入{ createPinia，PiniaVuePlugin }

　　使用(PiniaVuePlugin)

　　const pinia=createPinia()

　　新Vue({

　　埃尔： #app ，

　　//其他配置项

　　皮尼亚，

　　})

3、基本使用

　　//定义商店

　　//stores/counter.js

　　从“pinia”导入{ defineStore }

　　export const useCounterStore=defineStore( counter ，{

　　//状态值定义

　　状态：()={

　　返回{ count: 0 }

　　//状态更改方法定义

　　动作：{

　　增量(){

　　这个.计数

　　})

　　//在组件中使用

　　//导入状态

　　从“@/stores/counter”导入{ useCounterStore }

　　导出默认值{

　　setup() {

　　//初始化存储实例

　　const counter=useCounterStore()

　　//状态更新

　　计数器.计数

　　//或者调用方法更新

　　计数器.增量()

　　}

4、也可以像vuex一样使用

　　const useCounterStore=defineStore( counter ，{

　　//状态值

　　state: ()=({ count: 0 })，

　　//getter值

　　getters: {

　　double: (state)=state.count * 2，

　　//动作方法

　　//注意皮尼亚没有突变

　　动作：{

　　增量(){

　　这个.计数

　　}

　　})

　　//定义另一个存储

　　const use user store=defineStore( user ，{

　　//.

　　})

　　导出默认值{

　　//状态中的值被引入并用于计算。

　　计算值：{

　　.地图商店(useCounterStore，useUserStore)

　　.mapState(useCounterStore，[count ， double])，

　　//在方法中使用操作

　　方法：{

　　.mapActions(useCounterStore，[increment])，

　　}

　　好了，皮尼亚入门教程到此为止。语法更简洁了吗？

　　关于Vue新状态管理库Pinia的入门教程，本文到此结束。有关Vue Pinia的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

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