10 | 数据流：如何使用Vuex设计你的数据流
该思维导图由 AI 生成，仅供参考
前端数据管理
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
Vuex是一个用于管理前端数据流的框架，本文深入浅出地介绍了Vuex的设计和使用。作者首先解释了前端数据管理的重要性，以及使用全局变量和响应式数据的问题。随后详细介绍了Vuex的作用和意义，将其比喻为项目中的大管家，用于集中式存储管理应用的所有组件的状态。文章演示了如何使用Vuex，包括安装、创建数据存储、注册数据源以及在组件中使用。作者还提出了何时使用Vuex管理数据，何时使用组件内部的ref管理数据，并给出了明确的答案。此外，文章手写了一个迷你的Vuex实现，通过提供代码示例展示了其原理和用法。另外，文章还介绍了下一代的Vuex——Pinia，以及对TypeScript的支持。总的来说，本文为读者提供了全面的学习指南，让读者对Vuex有了更深入的了解。
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
全部留言(59)
- 最新
- 精选
ll置顶
非常棒的一节，在学习内容的过程中，我也在回顾之前学习关于 Vuex 的知识，在写miniVuex 的实现的代码后，对组件化有了新的认识，简单说下体会。 “组件化” 是解决“复杂”问题的重要思想。其实现就是一个个“组件”，即使表现方式不同，核心还是 MVX 的模型。 这样理解，组件内的 state 就是 model，渲染出来的“图形”就是 view，而这个 X 是这 model 与 view 的“沟通方式”，它可以是 control，也可以是 view model，大概就这个意思。这里要注意，model 和 view 不应该直接沟通。 我们现在的工作就是在“搭积木”，怎么搭很重要，但是了解手中的“积木”也同样重要。 Vue2 提供的积木有 MVX(一般组件)，VX(函数式组件)，MX(vuex)；而 Vue3 通过 CompositionAPI 提供了 M，一个只有 M 的“组件”，也是Vue3灵活原因之一。 到这，我发现，其实 Vuex 也是组件，没有 View 的组件，有 Model（state），有 X（mutation，action），它的逻辑和其他组件一样，想要变更“状态”，必须通过X。就这样“管家”诞生了。 可是具体这个是怎么实现的？ 大概说下几个API：install，provide，use 等，大圣讲的很清楚，回头多看几遍，最主要的是多写写。作者回复: 精品回复！！赞赞赞
2021-11-08236
一个小🍎我Vuex4都还没学完，Pinia就出来了，学不完了。 （话说想请教大圣老师，在前端技术发展如此之快的情况下，我们应该如何做取舍呢？）作者回复: 只学成熟的技术就可以了，不需要过于追热点，Pinia和Vuex也是有很多概念和理念是一脉相承的
2021-11-0823
乐叶constructor(options) { this._state = reactive({ // data: options.state data: options.state() }) this.mutations = options.mutations } get state() { return this._state.data } options.state这样写使用调试发现获取到的是函数 options.state()写成这样才可以正常运行作者回复: 是的是的，第一部分实战代码在这里呀，欢迎遇见bug了提pr呀 https://github.com/shengxinjing/geektime-vue-course
2021-11-08516- Geek_4578dc建议大圣老师把每节的代码放出来，这样有利于阅读
作者回复: 第一部分实战代码在这里呀，欢迎遇见bug了提pr呀 https://github.com/shengxinjing/geektime-vue-course
2021-11-087 
也許有一天我们公司导入rxjs来取代vuex，不得不说rxjs是真的猛...作者回复: rx确实是数据管理的王牌框架，上手成本也是有一些
2021-12-056
深蓝状态管理感觉是前端代码的核心，其他所有组件，监听数据流的变化，或改变数据，然后与这个数据流相关的页面组件作出响应变化，动态菜单，导航栏，以及主页面的组件就随之改变了，整个Web服务就动起来了，最近几天vuex 看的有点晕，有个地方有点疑惑 1 vue < script> computed </script> 2 vuex 也有 getters 两者都是计算属性，这里绕来绕去，还是理不清这里怎么使用最好？作者回复: getters是vuex内部的computed，或者你也可以一把梭全部都用computed，如果vuex中有的计算结果需要多次复用，就从computed移到getter中
2021-11-204
醉月大圣老师Pinia会有涉及吗作者回复: 最后会有涉及的，毕竟是未来的vuex
2021-11-084
uncle 邦count 不是使用 ref 直接定义，而是使用计算属性返回了 state.state.count，也就是刚才在 src/store/index.js 中定义的 count。这个 " state.state.count" 是不是要改成 “store.state.count”作者回复: 感谢提示这个错别字，已经提交给编辑 第一部分实战代码在这里呀，欢迎遇见bug了提pr呀 https://github.com/shengxinjing/geektime-vue-course
2021-11-083
Mercurywithu请问下大圣老师。install 方法为什么会在main.js入口处app.use(store)的时候，执行这个函数调用。是内置的api么、作者回复: 对，这个是vue内部插件的书写方法，可以看下use函数的源码 https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/apiCreateApp.ts#L219
2022-01-152- xiaxiaxiaxia为什么在代码示例里总是省略那么多你觉得我们都会懂的代码呢。。。。对新手一点也不友好。。。
作者回复: 你好，非常抱歉对你造成困扰，是哪一部分你觉得不太友好呢？我后面可以加上一些
2021-12-222