当前播放: 19 | 如何在Vue中使用Vuex
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
第一章:基础篇 (17讲)
01 | 课程介绍
免费
02 | Vue简介
免费
03 | 内容综述
免费
04 | 第一个Vue程序
免费
05 | 组件基础及组件注册
免费
06 | Vue组件的核心概念:事件
免费
07 | Vue组件的核心概:插槽
免费
08 | 理解单文件组件
09 | 双向绑定和单向数据流不冲突
10 | 理解虚拟DOM及key属性的作用
11 | 如何触发组件的更新
12 | 合理应用计算属性和侦听器
13 | 生命周期的应用场景和函数式组件
14 | 指令的本质是什么
15 | 常用高级特性provide/inject
16 | 如何优雅地获取跨层级组件实例(拒绝递归)
17 | template和JSX的对比以及它们的本质
第二章:生态篇 (13讲)
18 | 为什么需要Vuex
19 | 如何在Vue中使用Vuex
20 | Vuex核心概念及底层原理
21 | Vuex最佳实践
22 | Vue Router的使用场景
23 | 选择何种模式的路由及底层原理
24 | Nuxt解决了哪些问题?
25 | Nuxt核心原理是什么?
26 | UI组件库对比:Element UI、Ant Design Vue、iView
27 | 提升开发效率和体验的常用工具:ESLint、Prettier、vue-devtools
28 | 单元测试的重要性及其使用
29 | 生态篇习题解答(上)
30 | 生态篇习题解答(下)
第三章:实战篇 (21讲)
31 | Ant Design Pro介绍
32 | 使用Vue CLI 3快速创建项目
33 | 如何自定义Webpack和Babel配置
34 | 如何设计一个高扩展性的路由
35 | 实现一个可动态改变的页面布局
36 | 如何将菜单和路由结合
37 | 如何使用路由管理用户权限
38 | 更加精细化的权限设计(权限组件、权限指令)
39 | 如何在组件中使用ECharts、Antv等其他第三方库
40 | 如何高效地使用Mock数据进行开发
41 | 如何与服务端进行交互(Axios)
42 | 创建一个普通表单
43 | 初始数据、自动校验、动态赋值
44 | 创建一个分步表单
45 | 自己封装一个支持自动校验的表单项
46 | 如何管理系统中使用的图标
47 | 如何定制主题及动态切换主题
48 | 如何做好国际化
49 | 如何高效地构建打包发布
50 | 如何构建可交互的组件文档
51 | 如何做好组件的单元测试
第四章:福利篇 (2讲)
52 | 如何发布组件到npm
53 | GitHub相关生态应用(持续集成、单测覆盖率、文档发布、issue管理)
19 | 如何在Vue中使用Vuex

19 | 如何在Vue中使用Vuex

唐金州
一点资讯前端技术专家,Ant Design Vue 作者
53讲 53课时,约500分钟10742
单独订阅¥129
2人成团¥99
11
本节摘要

勘误

Vuex 的 actions 应该避免直接操作 state,state 的更改应该由 mutations 去修改,不然 vue-devtools 插件记录不到 state 变更,
actions 可以根据当前 state 进一步处理数据,计算或请求后端接口,然后通过 commit 的形式提交给 mutations 去处理。

本节计数器 actions 部分直接操作了 state ,这个写法有问题,正确代码如下:

increment({commit}) {
setTimeout(()=>{
commit('increment')
}, 3000)
}
复制代码

源代码地址

https://github.com/geektime-geekbang/geektime-vue-1/tree/master/vuex-demo1

https://github.com/geektime-geekbang/geektime-vue-1/tree/master/vuex-demo2

https://github.com/geektime-geekbang/geektime-vue-1/tree/master/vuex-demo3

展开
登录 后留言

精选留言(14)

  • Yrt 置顶
    有个问题, 为什么在actions 里的increment函数可以直接修改 state.count? 我翻了文档,里面说的是在actions里去提交mutations 不让直接更改状态 。increment 文档里的传的参数是context 然后视频里传的 是state 是因为这个参数的原因吗?

    作者回复: 感谢提醒,的确不应该在actions里面去操作state,这样devtools就记录不到变化状态了,传的依然是context哈,注意state两边的大括号,他的作用就是从context里面取出来 state,也是es6的语法,正确代码应该是:
    actions: {
        increment({commit}) {
          setTimeout(()=>{
            commit('increment')
          }, 3000)
        }
      },

    2019-03-27
    6
  • NullPointerException
    Vue 已经用了挺久了,在公司也用 Vue 写过了几个项目,虽然是个Java程序员 但对前端越来越感兴趣。 希望在这门课学习之后可以对 Vue 的基础有更深入的理解。
    2019-03-26
    3
  • @
    希望老师能稍微更新快点,我十分感兴趣后面的实战项目。

    编辑回复: 下周开始更新实战部分

    2019-03-27
    2
  • 王永林
    感觉不懂node开发学习起来有点吃力,最近搞了好多遍环境,总是因为版本依赖问题最后导致无法运行起来,于是又重新建项目。作为老java开发,也只会在idea下写代码,就是开发用的插件不支持2.6

    作者回复: 不应该,版本依赖并不需要自己配置,这也是相对于java的优势,你完全可以不懂node,就可以使用vue

    2019-03-28
    1
  • 庆丰年间
    有没有什么避免每次都清理缓存刷新页面的方法啊,要不有的时候总抱错
    2019-12-19
  • 庆丰年间
    老师请问为什么要在computed里面获取count值呢,这个是否跟生命周期有关
    2019-12-16
  • Saki
    在actions里可以不用increment这个命名吗?也就是这里的是否需要与mutations里的命名相同?我觉得应该不用吧…
    2019-11-07
  • 我在神游
    课后习题哪有答案呀?会讲解答案吗?
    2019-10-31
  • Man
    vuex是否可以结合saga一起使用?将异步请求或者业务逻辑独立出来?
    2019-08-25
  • 烟雨海花lwl
    真的和mobx很像,打开了我vue从无到入门的启蒙之路,打卡
    2019-04-15
  • Ted
    请问下老师使用的命令行工具叫什么?

    作者回复: 就是使用系统自带的,mac  terminal,如果你也使用的mac,看到的和我不一样,是我自己自定义了主题。

    2019-04-02
  • 药岩
    老师,我想问下,使用vuex的时候有没有必要将所有的state都转化成getter,然后让组件通过mapGetters去获取属性

    作者回复: 没必要的,单个状态没有任何意义,涉及到进一步计算合并才使用getter

    2019-03-28
  • 刘彪
    启动演示DEMO源码出现依赖错误,但是已经安装过core-js了
    These dependencies were not found:

    * core-js/modules/es6.array.find-index in ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_babel-loader@8.0.5@babel-loader/lib!./node_modules/_cache-loader@2.0.1@

    作者回复: 重装试试吧 npm建议使用 taobao 源。

    2019-03-27
  • 初雨初霁
    我现在的项目一直在使用VUE,之前对vuex只停留在会使用得基础上,看完之后觉得对原理有了更进一步的认识。后面我也会抽时间看看源代码,希望更进一步对vuex进行深入得了解
    2019-03-26
收起评论
看过的人还看
趣谈网络协议

刘超  网易研究院云计算技术部首席架构师

51讲 | 40031 人已学习

拼团 ¥79 原价 ¥99
MySQL实战45讲

林晓斌  网名丁奇,前阿里资深技术专家

48讲 | 44087 人已学习

拼团 ¥79 原价 ¥99
重学前端

程劭非(winter)  前手机淘宝前端负责人

58讲 | 33177 人已学习

¥99
玩转webpack

程柳锋  腾讯高级工程师,IVWEB团队社区和工程化负责人

84讲 | 5514 人已学习

拼团 ¥79 原价 ¥99