Vue|Vue 状态管理未来样子
新出了一个系列:Vue2与Vue3 技巧小册
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。随着Vue 3越来越受重视并成为默认版本,许多事情正在发生变化,生态系统逐渐完善中。直到最近,Vue3 的状态管理默认推荐的是使用 Pinia。这节课,我们根据项目的规模,探索不同的状态管理方式,并尝试预测 Vue 中状态管理的未来会是什么样子。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
响应式 API 在options API中,我们可以使用
data()
选项为一个组件声明响应式数据。在内部,返回的对象被包在响应式帮助器中。这个帮助器也可以作为一个公共API使用。如果是多个数据被多个实例共享的状态,那么 可以使用
reactive()
来创建一个 reactive 对象,然后从多个组件中导入它。import { reactive } from "vue";
export const store = {
state: reactive({
heroes: ['Aragorn', 'Legolas', 'Gimli', 'Gandalf']
}),
addHero(hero) {
this.state.heroes.push(hero);
}
};
通过这种方法,数据被集中起来,并可以在各个组件之间重复使用。这可能是一个简单的选择,对一个小的应用程序来说占用的空间最小。
组合 一个类似的概念,即composition API带来的概念,是使用一个组合 。这种模式在React 那么非常流行,结合Vue强大的响应性机制,可以编写一些优雅的、可重复使用的可组合,比如下面这些:
import { ref, computed } from "vue";
import fakeApiCall from "../api";
export default function useFellowship() {
const heroes = ref([]);
const loading = ref(false);
async function init() {
loading.value = https://www.it610.com/article/true;
heroes.value = await fakeApiCall();
loading.value = false;
}
return {
heroes: computed(() => heroes.value),
loading: computed(() => loading.value),
init
};
}
然后,可以这样使用:
Loading...
Companions: {{ heroes.join(", ") }}
事例地址:https://codesandbox.io/s/comp...
这种模式最初是为了取代 mixins 而引入的,因为现在的组合比继承更受欢迎。但它也可以用来在组件之间共享状态。这也是许多为取代 Vuex 而出现的库背后的主要想法。
Vuex 4
![Vue|Vue 状态管理未来样子](http://img.readke.com/220818/09313C9D-0.jpg)
文章图片
Vuex是不会消失的。它支持Vue 3,具有相同的API和最小的破坏性变化(这可能是其他库应该注意的)。唯一的变化是,安装必须发生在一个 Vue 实例上,而不是直接安装在 Vue 原型上。
import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'const app = createApp(App)app.use(store)app.mount('#app')
Vuex 4 仍在维护中。不过,不会再有很多新的功能被添加到它里面。如果你已经有一个使用Vuex 3的项目,并想推迟迁移到其他东西上,这是一个不错的选择。
Pinia
![Vue|Vue 状态管理未来样子](http://img.readke.com/220818/0931361943-1.jpg)
文章图片
Pinia 开始是一个实验,但很快就成为 Vue 3 的主要选择。它提供了比 Vuex 更多的 API ,有更好的架构和更直观的语法,充分利用了组合API。
在开发工具的支持上(状态检查、带动作的时间线和时间旅行的能力),以及 Vuex 所提供的使用插件的扩展性,pinia 在设计上是类型安全和模块化的,这是使用Vuex时最大的两个痛点。
此外,定义 story 的语法与 Vuex 模块非常相似,这使得迁移的工作量非常小,而在使用该 store 时,用到的 API,接近于 Vue3 使用组合API的方式。
import { defineStore } from 'pinia'export const useFellowship = defineStore('fellowship', {
state: () => {
return { heroes: ['Aragorn', 'Legolas', 'Gimli', 'Gandalf'] }
},
actions: {
addHero(hero) {
this.heroes.push(hero)
},
},
})
你可能已经注意到的,最大的区别是 mutations 完全消失了。它们通常被认为是极其冗长的,而使用它们没有任何真正的好处。此外,也不再需要命名空间了。有了新的导入 store 的方式,所有的东西都被设计成了命名空间。这意味着,在 Pinia 中,你没有一个带有多个模块的 store ,而是有多个按需导入和使用的 store 。
Pinia Setup Store Pinia支持另一种语法来定义 store。它使用一个定义响应式属性和方法的函数,并返回它们,与Vue Composition API的 setup 函数非常相似。
import { defineStore } from 'pinia'export const useFellowship = defineStore('fellowship', () => {
const heroes = ref([]);
function addHero(hero) {
heroes.value.push(hero)
}
return {
heroes,
addHero
};
})
在 Setup Stores 中:
ref()
成为state
属性computed()
成为getters
function()
成为actions
一个更实际的例子 创建一个 fellowship store,它可以容纳一个
heroes
列表,并能添加和删除对应的元素:import { defineStore } from 'pinia'export const useFellowship = defineStore('fellowship', {
state: () => ({
heroes: [],
filter: 'all',
// type will be automatically inferred to number
id: 1
}),
getters: {
aliveHeroes(state) {
return state.heroes.filter((hero) => hero.isAlive)
},
deadHeroes(state) {
return state.heroes.filter((hero) => !hero.isAlive)
},
filteredHeroes() {
switch (this.filter) {
case 'alive':
return this.aliveHeroes
case 'dead':
return this.deadHeroes
default:
return this.heroes
}
}
},
actions: {
addHero(name) {
if (!name) return
// Directly mutating the state!
this.heroes.push({ name, id: this.id++, isAlive: true })
},
killHero(name) {
this.heroes = this.heroes.map((hero) => {
if (hero.name === name) {
hero.isAlive = false
}
return hero
})
},
setActiveFilter(filter) {
this.filter = filter
}
}
})
如果你熟悉Vuex,那么理解这段代码应该不是什么难事。
【Vue|Vue 状态管理未来样子】首先,每个 state 都需要一个作为命名空间的键。这里,我们使用
fellowship
。state
是一个函数,保存这个 store 的所有响应性数据,getters
是访问 store 里面的数据。state
和 getters
都与Vuex相同。但对于 actions 来说与 Vuex 差异比较大。上下文参数已经消失了,actions 可以直接通过
this
访问 state 和 getters 。你可能已经注意到的,actions 直接操作 state,这在Vuex 中是被严格禁止的。最后,由于状态操作现在是在 actions 进行的,所以 mutations 被完全删除。
使用 pinia store 很简单:
-
{{ hero.name }} - {{ hero.isAlive ? 'Alive' : 'Dead' }}
Your fellowship is empty
Sugestions:
所有的逻辑都发生在
setup
函数中。导入的 useFellowship
钩子被执行并返回。这样在 template 就可以直接。当然,这个组件应该被分解成更小的可重复使用的组件,但为了演示的目的,就先这样吧。
如果一个不同的组件需要访问相同的 state,可以用类似的方式来完成。
Filter:
事例地址:https://codesandbox.io/s/pini...
从 Vuex 迁移到 Pinia Pinia的文档很乐观,认为代码可以在库之间重复使用,但事实是,架构非常不同,肯定需要重构。首先,在Vuex中,我们有一个带有多个模块的 store ,而 Pinia 是围绕着多个 store 的概念建立的。将这一概念过渡到Pinia 中的最简单方法是,以前使用的每个模块现在都是一个 store 。
此外,
mutations
不再存在。相反,这些应该转换为直接访问和改变状态的操作。Actions 不再接受上下文作为其第一个参数。它们应该被更新以直接访问状态或任何其他上下文属性。这同样适用于
rootState
、rootGetters
等,因为单一全局存储的概念并不存在。如果你想使用另一个 store,需要明确地导入它。很明显,对于大型项目来说,迁移将是复杂和耗时的,但希望大量的模板代码将被消除,store 将遵循一个更干净和模块化的架构。改造可以逐个模块进行,而不是一次性改造所有内容。实际上,在迁移过程中,可以将 Pinea 和Vuex混合在一起,这种方法对于复杂的项目来说也是不错的选择。
总结
![Vue|Vue 状态管理未来样子](http://img.readke.com/220818/0931361948-2.jpg)
文章图片
预测未来并不容易,但就目前而言,Pinea 是最安全的赌注。它提供了一个模块化的架构,通过设计实现类型安全,并消除了模板代码。如果你要用Vue 3开始一个新的项目,Pinia 是值得推荐的选择。
如果你已经在使用Vuex,你可以在迁移到Pinia之前升级到第4版,因为这个过程看起来很简单,但需要大量的时间。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
作者:Fotis Adamakis 译者:前端小智 来源:mediun
原文:
https://fadamakis.medium.com/...
交流
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
![Vue|Vue 状态管理未来样子](http://img.readke.com/220818/0931361238-3.jpg)
文章图片
推荐阅读
- [从0到1搭建ABP微服务]|[从0到1搭建ABP微服务] - 搭建租户管理服务
- 面试准备系列之操作系统
- vue3如何自定义js文件(插件或配置)
- 记录一个Vue3简易微信右滑删除逻辑的思路实现
- Vue3|Vue3 中自定义插件的实现方法
- Vue3|Vue3 中的插件和配置推荐大全
- vue3集成markdown
- 企业内容建站系统 ModStartCMS v4.6.0 管理角色备注,文件管理优化
- Vue+Koa+MongoDB从零打造一个任务管理系统
- vue|vue环境搭建