全新的 Vue3 状态管理工具:Pinia
作者:互联网
Vue3 发布已经有一段时间了,它采用了新的响应式系统,而且构建了一套全新的 Composition API
。Vue 的周边生态都在加紧适配这套新的系统,官方的状态管理库 Vuex 也在适配中,为此官方提出了一个 Vuex 5 的全新提案。
- 支持两种语法创建 Store:
Options Api
和Composition Api
; - 删除
mutations
,只支持state
、getters
、actions
; - 模块化的设计,能很好支持代码分割;
- 没有嵌套的模块,只有 Store 的概念;
- 完整的
TypeScript
支持;
在这个提案下方,有个评论很有意思。简单翻译一下:
好巧不巧,Vuex5 的提案,与 Pinia 实现的功能不能说毫无关系,只能说一模一样,今天的文章就来给大家介绍一下这个菠萝。
安装
在现有项目中,用过如下命令进行 Pinia 模块的安装。
# yarn yarn add pinia@next # npm npm i pinia@next
安装完成后,需要在 Vue3 项目的入口文件中,进行导入安装。
// main.js import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' // 实例化 Vue const app = createApp(App) // 安装 Pinia app.use(createPinia()) // 挂载在真实 DOM app.mount('#app')
上手
要使用 Pinia 的话,只需要定义一个 store,然后在用到该数据的地方进行导入。
定义 Store
import { defineStore } from "pinia" // 对外部暴露一个 use 方法,该方法会导出我们定义的 state const useCounterStore = defineStore({ // 每个 store 的 id 必须唯一 id: 'counter', // state 表示数据源 state: () => ({ count: 0 }), // getters 类似于 computed,可对 state 的值进行二次计算 getters: { double () { // getter 中的 this 指向标签:count,pinia,管理工具,state,Api,Pinia,Vue3,import,computed 来源: https://www.cnblogs.com/hhj-blog/p/15700883.html