源代码地址

精选留言(18)

• 
  Kian

  2019-11-04

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

  作者回复: 👍🏻

  

   2
• 
  烟雨海花lwl

  2019-04-29

  打卡

  

   1
• 
  ~鸵鸟蛋~

  2019-11-26

  老师你好，请问自己实现的 vuex 的getters里，为什么是返回 this._vm._data.$$state，而不是this._vm.data.$$state？

  

  
• 
  Saki

  2019-11-07

  理解了，但暂时没想到哪里需要用到…跨多个页面且具有复杂操作时可以用对吧？如果只是简单的缓存数据应该用不上这个

  

  
• 
  tuyu

  2019-07-07

  作者你好, 那个 ...mapState({}) 中...是啥意思

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

  

  
• 
  院长。

  2019-07-06

  现在回复不知道还有没用，但是代码好像有错，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
        }
      })
    },

  展开

   1

  
• 
  Geek_redrain

  2019-05-31

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

  作者回复: 👍

  

  
• 
  Geek_redrain

  2019-05-31

  大佬你好，在看源码的时候，有一个点没搞明白。products.js中的action, getAllProducts({commit})中的{commit}该如何理解。解构赋值明白，但是这个commit是从哪来的？不太理解。实际调用中productList.vue中的dispatch没有给出相关参数阿，网上找到一段说的是context.commit？

  

  
• 
  CrazyMuyang

  2019-05-19

  用了那么久vue了，一直有一个疑问，所有的异步接口如果都放入action中请求的话，对于那种返回值需要多种条件（以及fail的情况）判断的该怎样处理？也要针对不同的情况将数据注入state中吗？
  vue项目下很早以前有过一个issue讨论过这个问题，但是我仍然没有从中得到很明确的答案。
  https://github.com/vuejs/vuex/issues/24
  望大哥解惑。

  

  
• 
  Lily

  2019-05-17

  [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-09

  老师vuex-orm这个我觉得应该可以的呀

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

  

  
• 
  young

  2019-04-14

  老师，import { xxx } from "vuex" 为什么要用{}括号啊？前面的课程没有这样的语法

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

  

  
• 
  冬天的雪好暖

  2019-04-11

  老师您好，我想问问用了vuex，router以后还需要用前面父子组件之间的传值（例如props）吗？而且组件的引用都在router里面，插槽还能用吗？

  作者回复: 都用vuex ？ 不建议这么做，有句话是这么说的: 如果你不知道要不要用vuex ，那你大概率是不需要vuex的
  
  组件的引用都在router？ 你这个要吗是项目简单，要吗是你的路由非常庞大！

  

  
• 
  Ronnie

  2019-04-09

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

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

  

  
• 
  Mayao

  2019-04-09

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

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

  

  
• 
  O_o

  2019-04-08

  辅助函数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-03

  commit(`products/${PRODUCTS.DECREMENT_PRODUCT_INVENTORY}`, { id: product.id }, { root: true })
  
  [PRODUCTS.DECREMENT_PRODUCT_INVENTORY] (state, { id }) {
      const product = state.all.find(product => product.id === id)
      product.inventory--
    }
  
  老师不知道 { root: true } 这是什么意思，有什么用？没有看见使用的地方

  展开

  作者回复: 这是给vuex内部用的，如果不加root: true，你在模块内提交的commit是该模块内的，加了之后便可以触发跟的mutation，示例中是在cart模块中commit一个products模块中的mutation

  

  
• 
  秦滈

  2019-04-03

  老师，你讲的很好。但是github的地址经常下载不了。能否在码云增加备份地址呢

  作者回复: 多谢建议，会反馈给小编

  

  