乐趣区

关于前端:测试一下PiniaVuex-要出局了

jiezi

作者：Emil Hein
译者：前端小智
起源：betterprogramming

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

自从我开始应用 Vue 3 和组合 API 以来，我也尝试应用 Pinea 作为状态治理库。如果是从是 vue2 和 vuex 过去的，就会感觉用起来差异还是很大的。

说实话，我对 Vuex 应用还是很不适应。最后，有 “ 很多 “ 的模板代码，只是让 store 应用缩小。不过，状态治理的确给咱们带来了遍历，特地是每当咱们有一小块应该跨组件共享的状态时，就会更偏向于应用它。

咱们先来看看 Vuex 和 Pinia 的整体设计以及它们之间的区别是什么。

Vuex

上面是 Vuex 工作原理的官网图示，刚开始学习时，一看就很懵，不过当用过期开发过我的项目时，一看就就能懂了。

在 Vuex store（仓库）中，有 4 个次要组件。

1. State

这只是一个蕴含理论状态的对象。咱们能够在开发工具中看到这个状态，如果想保留这个状态用于缓存或其余目标，也能够保留这个对象。

2. Actions

Actions 是执行异步工作的函数。它们是由关键字 dispatch 发动的。

Actions 通常会申请一个内部 API 或做一些其余的异步工作。它还负责调用适当的 mutation 来理论扭转状态。这阐明 actions 自身并没有扭转状态，而是 commit 变动，让 mutation 来扭转状态。

3. Mutations

Mutation 是惟一会真正同步扭转状态的函数。Mutations 应用关键字commit。

4. Getters

Getters 能够被认为是计算过的属性，应该被用来从状态中取得一个批改过的响应。

一个简略的 Vuex store 的例子如下所示：

const store = createStore({
  state: {count: 0},
  mutations: {increment (state) {state.count++}
  },
  actions: {increment (context) {context.commit('increment')
    }
  }
})

应用 store

在解决上述问题时，一个组件通常会调用 dispatch 来启动异步工作（比方从内部 API 中获取）。如果须要扭转状态，比方一个简略的计数器，能够调用 commit。

这意味着一个组件能够通过调用 dispatch 或commit来与 store 进行交互。我不晓得你怎么想，但对我来说，这减少了一些心智累赘，而我真的不须要。

在应用 Vuex 之前，我对 “commit” 和 “dispatch” 这两个术语并不相熟。因为这个起因，用它们来扭转状态对我来说并不直观。对于一些人来说，这可能是不同的，但这让我感觉应用 action 或 mutation 都有点不难受。

另外值得注意的是，应用 Vuex，一个组件能够拜访整个 store，只管在逻辑上将 Vuex store 分成不同的文件。

Pinia

与 Vuex 相比，Pinia 的工作原理图如下：

整体架构比 Vuex 更简略，更容易了解。一个 Pinia store 有 3 个次要组成部分:

1. State

与 Vuex 的定义一样。

2. Actions

这里的 Actions 与 Vuex 中的 Actions 和 mutations 的工作雷同。这些函数是扭转状态的惟一形式。如果想从内部 API 获取数据并更新状态，也能够应用 actions。

与 Vuex 设置的另一个区别是，Pinia actions 是一般函数，心智累赘比 vuex 小很多。

3. Getters

getter 齐全等同于 Store 状态的计算属性

一个简略的 Pinia store 的例子如下所示：

export const useStore = defineStore('main', {state: () => ({counter: 0,}),
  actions: {increment() {this.counter++}
  },
})

应用

如果有多个模板，Vuex 个别采纳 modules 形式，这就须要在 store/index.ts中将所有的 modules通过 creaeStore 注册到 store 中，那么 Pinia 就省去了这些麻烦，createPinia() 即可，不须要注册 modules，没有任何参数，所以连 store/index.ts都能够不必了，间接在main.ts 中增加即可，这一点会比 Vuex 简洁很多

import {createPinia} from 'pinia'
app.use(createPinia())；# main.ts

import {createApp} from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'

const app = createApp(App)
app.use(createPinia())

app.mount('#app')

总结

就目前而言，我想说 Pinia 更容易了解和应用。兴许有一些货色能够让 Vuex 在更大的我的项目中更好地扩大，但我还没有遇到过这种状况。

对我来说，另一件重要的事件是，咱们能够用失常的参数调用 actions 的失常办法。

Pinia 还反对 Vue 2 和 3 的开箱即用，这使得迁徙变得更加容易。

劣势

最初也在总结一下 Pinia 劣势：

  • Vue2 和 Vue3 都反对
  • 更小，只有 1KB
  • 不须要嵌套模块，合乎 Vue3 的 Composition api，让代码更加扁平化
  • 摈弃了 Mutations 的操作，只有 state、getters 和 actions. 极大简化了状态治理库的应用残缺的 TypeScript 反对
  • 代码更加简洁，能够实现很好的代码主动宰割

Pinia 还有很多的用户和细节，请转官网文档 Home | Pinia (vuejs.org)

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原谅：https://betterproramming.pub/…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版