前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Pinia.js - Vue新一代状态管理器

Pinia.js - Vue新一代状态管理器

作者头像
青年码农
发布2022-09-27 08:38:33
1.2K1
发布2022-09-27 08:38:33
举报
文章被收录于专栏:青年码农

Pinia.js是由Vue.js团队核心成员开发的新一代状态管理器,使用Composition Api进行重新设计的,也被视为下一代Vuex。它和Vuex有很多相似的地方,本质上是对Vuex做出了一些改进。与Vuex相比,Pinia.js去除了Vuex中对于同步函数Mutations和异步函数Actions的区分。直接在Actions中便能够使用同步和异步方法,其次相比于Vuex,Pinia.js对于TypeScript的支持性更好

一 安装

可以使用 yarn 或者 npm 安装

安装成功会把依赖加在 package.json 的 dependencies 中。

二 配置

安装成功后,根据Pinia官方给的格式建议,在项目的 src 目录下新建 store 文件夹,文件夹下新建 index.ts(全局配置文件) 和 modules(分模块)文件夹

在main.ts文件中进行全局挂载store文件:

这样全局挂载就完成了,接下来在 modules 写一个小 demo

三 示例

在使用仓库状态数据前,需要先使用 defineStore() 进行定义一个仓库,需要使用唯一的名字进行命名。我们看下这个方法里面提供哪些属性-pinia.d.ts

可以看到有state、getters、actions,和 Vuex 很像。

state:存放组件之间共享的数据。

代码语言:javascript
复制
  state: () => {
    return {
      count: ,
      arr:[,,,],
      obj:{
        name:"li",
        age:
      }
    };
  },

注意,将 store 解构之后,就不是响应式的了,如果想要解构,则需要使用 storeToRefs 函数包裹。

getters:对state中存储的数据进行过滤操作

代码语言:javascript
复制
  getters:{
    // 依赖state
    doubleCount(state){
      return state.count *
    },
    // 依赖其他的getters, :number 是指定返回值类型为number类型
    otherCount():number{
      return this.doubleCount + 
    }
  }

actions:方法,同步、异步都支持

代码语言:javascript
复制
  actions: {
    increment() {
      this.count++;
    }
  

在Vue中使用上面的store,

点击一次add按钮,就会给count+1

除了上面这种方式修改state以外,还可以通过

1 $patch 修改

代码语言:javascript
复制
counter.$patch({count:counter.count})
2 $state
代码语言:javascript
复制
counter.$state = {counter:10}
3 action
代码语言:javascript
复制
counter.increment()

四 参考文档

官方:https://pinia.vuejs.org/introduction.html

github:https://github.com/vuejs/pinia

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-08-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 青年码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档