当前播放: 21 | 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管理)
21 | Vuex最佳实践

21 | Vuex最佳实践

唐金州
一点资讯前端技术专家,Ant Design Vue 作者
全集14704
新人首单 ¥29.9 原价 ¥129
28
登录 后留言

精选留言(22)

  • 方渐鸿
    小米9没有货。。。太真实了。
    2020-03-01
    7
  • Kian
    这个地方还是需要好好研究一下的,vuex的最佳实践方案。以及命名空间的使用,不过像vuex的一些api 比如mapMatations 这种老师没有讲过的还是需要自己去查一下如果使用。 老师的教案没有详细的备注,所以有些地方可能比较难懂。https://github.com/Ccheng2729111/vuex-demo 我这边上传了一份有详细备注的项目,并且加上了老师留下的课后习题。希望可以帮到有疑惑的同学。

    作者回复: 👍🏻

    2019-11-04
    1
    6
  • 果然如此
    作业:
    product对象增加字段buy:1,默认购买1
    增加输入框和库存显示:
    库存:{{ product.inventory }}
    <input :disabled="!product.inventory" type="number" v-model="product.buy" style="width:30px;">
    修改addProductToCart
    addProductToCart ({ state, commit }, product) {
        console.log('addProductToCart',product.buy)
        commit(CART.SET_CHECKOUT_STATUS, null)
       //增加超库存判断
        if (product.buy>product.inventory){
          alert('库存不足'+product.buy)
          return
        }
        if (product.inventory > 0) {
          const cartItem = state.items.find(item => item.id === product.id)
          if (!cartItem) {
            commit(CART.PUSH_PRODUCT_TO_CART, { id: product.id, buy: product.buy })//增加buy参数
          } else {
            commit(CART.INCREMENT_ITEM_QUANTITY, cartItem) //cartItem中已有buy字段
          }
          // remove 1 item from stock
         //扣减库存增加buy字段
          commit(`products/${PRODUCTS.DECREMENT_PRODUCT_INVENTORY}`, { id: product.id, buy: product.buy }, { root: true })
        }
      }
    }
    //具体3个方法对product.buy进行增加或扣减
    1. 扣减库存buy
    [PRODUCTS.DECREMENT_PRODUCT_INVENTORY] (state, { id,buy }) {
        const product = state.all.find(product => product.id === id)
        //product.inventory--
        product.inventory -= buy
      }
    2. 首次购买增加buy
      [CART.PUSH_PRODUCT_TO_CART] (state, { id,buy }) {
        state.items.push({
          id,
          //quantity: 1
          quantity:buy
        })
      },
    //重复购买增加buy
    [CART.INCREMENT_ITEM_QUANTITY] (state, { id,buy }) {
        const cartItem = state.items.find(item => item.id === id)
        //cartItem.quantity++
        cartItem.quantity+=buy
      },
    2020-01-19
    1
  • 院长。
    现在回复不知道还有没用,但是代码好像有错,ShoppingCart.vue文件中。
       <ul>
          <li
            v-for="product in products"
            :key="product.id">
            {{ product.title }} - {{ product.price }} x {{ product.quantity }}
          </li>
        </ul>
    这里的key好想错了,你的代码逻辑里面product没有id。
    cartProducts: (state, getters, rootState) => {
        return state.items.map(({ id, quantity }) => {
          const product = rootState.products.all.find(product => product.id === id)
          return {
            title: product.title,
            price: product.price,
            quantity
          }
        })
      },
    2019-07-06
    1
    1
  • 烟雨海花lwl
    打卡
    2019-04-29
    1
  • print
    老师 您好 项目启动后 页面提示state未定义 这是什么原因呢
    2020-04-08
  • Danny
    大神,我有个问题,判断 UA 这个操作的最佳实践是不是应该在store的actions里面操作?
    2020-01-27
  • ~鸵鸟蛋~
    老师你好,请问自己实现的 vuex 的getters里,为什么是返回 this._vm._data.$$state,而不是this._vm.data.$$state?
    2019-11-26
    1
  • Saki
    理解了,但暂时没想到哪里需要用到…跨多个页面且具有复杂操作时可以用对吧?如果只是简单的缓存数据应该用不上这个
    2019-11-07
  • tuyu
    作者你好, 那个 ...mapState({}) 中...是啥意思

    作者回复: Es6的扩展运算符 mapstate返回的是对象 可以任何搜索引擎搜索 es6扩展运算符 查看更多资料

    2019-07-07
  • Geek_redrain
    额,上了vuex的官方文档看了下,原来action函数接受一个与 store 实例具有相同方法和属性的 context 对象,我明白了。

    作者回复: 👍

    2019-05-31
  • Geek_redrain
    大佬你好,在看源码的时候,有一个点没搞明白。products.js中的action, getAllProducts({commit})中的{commit}该如何理解。解构赋值明白,但是这个commit是从哪来的?不太理解。实际调用中productList.vue中的dispatch没有给出相关参数阿,网上找到一段说的是context.commit?
    2019-05-31
  • CrazyMuyang
    用了那么久vue了,一直有一个疑问,所有的异步接口如果都放入action中请求的话,对于那种返回值需要多种条件(以及fail的情况)判断的该怎样处理?也要针对不同的情况将数据注入state中吗?
    vue项目下很早以前有过一个issue讨论过这个问题,但是我仍然没有从中得到很明确的答案。
    https://github.com/vuejs/vuex/issues/24
    望大哥解惑。
    2019-05-19
  • Lily
    [CART.SET_CART_ITEMS] (state, { items }) {
        state.items = items
      },

      [CART.SET_CHECKOUT_STATUS] (state, status) {
        state.checkoutStatus = status
      }
    }
        commit(CART.SET_CHECKOUT_STATUS, null)
        // empty cart
        commit(CART.SET_CART_ITEMS, { items: [] })
        shop.buyProducts(
          products,
          () => commit(CART.SET_CHECKOUT_STATUS, 'successful'),
          () => {
            commit(CART.SET_CHECKOUT_STATUS, 'failed')
            // rollback to the cart saved before sending the request
            commit(CART.SET_CART_ITEMS, { items: savedCartItems })
          }
        )

    老师您好,我想问下 [CART.SET_CHECKOUT_STATUS] 这样写是什么操作呢?
    commit(CART.SET_CHECKOUT_STATUS, null)还有就是这样写?看不太懂

    作者回复: 属性名表达式,这里有详解
    http://es6.ruanyifeng.com/?search=%E8%A1%A8%E8%BE%BE%E5%BC%8F&x=0&y=0#docs/object#%E5%B1%9E%E6%80%A7%E5%90%8D%E8%A1%A8%E8%BE%BE%E5%BC%8F

    2019-05-17
  • 文哲
    老师vuex-orm这个我觉得应该可以的呀

    作者回复: 可以用 不过目前我还是喜欢原装的

    2019-05-09
  • young
    老师,import { xxx } from "vuex" 为什么要用{}括号啊?前面的课程没有这样的语法

    作者回复: 可以补一下 es6的知识,
    import {xxx} 是es6 模块化的知识,
    http://es6.ruanyifeng.com/#docs/module

    2019-04-14
  • 冬天的雪好暖
    老师您好,我想问问用了vuex,router以后还需要用前面父子组件之间的传值(例如props)吗?而且组件的引用都在router里面,插槽还能用吗?

    作者回复: 都用vuex ? 不建议这么做,有句话是这么说的: 如果你不知道要不要用vuex ,那你大概率是不需要vuex的

    组件的引用都在router? 你这个要吗是项目简单,要吗是你的路由非常庞大!

    2019-04-11
  • Ronnie
    created () {
                this.$store.dispatch('products/getAllProducts')
            },老师,这里其实就是在模拟了异步去取数据,那不是应该在mounted生命周期么?为什么这里在created里获取?

    作者回复: 对的,这两个周期实际上都可以,如果你看官方的异步demo,基本也都在created中去做,只是如果需要SSR,created会在服务端也执行,就需要放在mounted中,如果你不考虑ssr,这两个还是很随意的

    2019-04-09
  • Mayao
    请问下 什么场景用 mapState 取值 , 什么时候用 mapGetters 取值, 分不清这两者取回来的值有什么区别.
    不都是拿到state里的数据吗

    作者回复: 都能满足需求,mapGetters就像计算属性一样,涉及到多个state合并或计算时,可以使用,起到缓存的效果

    2019-04-09
  • O_o
    辅助函数mapState和mapGetters有哪些区别?是否可以将ProductList.vue文件中
    computed: mapState({
       products: state => state.products.all,
    })
    的写法改为在 product.js 文件更改getters如:
    const getters = {
       products: state => state.all
    }
    从而在ProductList.vue中使用
    computed: mapGetters('products', ['products'])

    作者回复: 可以看 Mayao的问题回复

    2019-04-08
收起评论
看过的人还看
重学前端

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

58讲 | 36808 人已学习

新人首单 ¥19.9 原价 ¥99
数据结构与算法之美

王争  前Google工程师

80讲 | 88786 人已学习

新人首单 ¥29.9 原价 ¥129
玩转webpack

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

84讲 | 7331 人已学习

新人首单 ¥19.9 原价 ¥99
Node.js开发实战

杨浩  腾讯高级工程师

57讲 | 6035 人已学习

新人首单 ¥29.9 原价 ¥129