我的也出现了这个问题：

dispatch 传递两个参数我试了只能接收第一个，第二个接收不到，就算我换了顺序也一样…

解决方式就是讨论的那样

// Todos.vue
deleteTodo (todo, index) {
  this.$store.dispatch('deleteTodo', {todo, index})
}

// main.js
deleteTodo (store, payload) {            
Vue.axios.delete('http://laravel.dev/api/todo/' + payload.todo.id + '/delete').then(response => {
    store.commit('delete_todo', payload.index)
  })
}

删除功能不是能正常使用吗？@博闻慎思 说得啥意思

突然理解了！花括号在 ES6 中位于行首时是被解析成代码块，有作用域的。

{
    // ...
}

如果不加圆括号的话

let Tom = {name: 'zhangb', age: 18};
let name;

{name, age} = Tom;

// 相当于
let Tom = {name: 'zhangb', age: 18};
let name;

{
    name, age
}
= Tom;

自然会报错 Uncaught SyntaxError: Unexpected token =。

加上圆括号之后，就是一个解构赋值表达式了。

@Yawenina 感谢你的解答！

视频里好像说，加 () 的话，{ name, age } = Tom 就是代码块，而不是解构赋值的语法。

那根据最后的 console 结果，这段代码块会将 Tom 属性的值赋给对应的 name 和 age 变量。

那这段代码块还是起到赋值作用的，但这种形式不还是解构赋值吗？我疑惑在这个地方的。

你说的括号是圆括号（()）吗？

你说的括号是圆括号（()）吗？

@JellyBool 有很用心啊，哈哈！

可能是因为新版的缘故，我感觉新版看教学视频的页面，除视频那一行都是白色的，有些太显眼了，容易分散注意力。

主要是因为录屏里的编辑器背景都是黑色的，如果能提供一个黑色的页面风格，个人感觉可能好些。

强烈支持！！

@JellyBool 我已经修改好了。

Todos.vue 组件直接接收来自父组件的变量 todos 进行使用

export default {
  props: ['todos'],
  data() {
    return {
      newTodo: { title: '', completed: false }
    }
  },

父组件 App.vue 安排如下：

1) 分别为子组件定义传递的变量 todayTodos 和 tomorrowTodos

export default {
  name: 'app',
  components: {
    Todos
  },
  data() {
    return {
      todayTodos: [],
      tomorrowTodos: [],
    }
  },
  mounted() {
    this.axios.get('http://homestead.app/api/todos').then((response) => {
      console.log(response.data)  
      this.todayTodos = response.data
      this.tomorrowTodos = [].concat(response.data)
    })
  }
}

2) 传递给 Todos.vue 组件

<div class="col-md-6">
  <todos v-bind:todos="todayTodos"></todos> 
</div>
<div class="col-md-6">
  <todos v-bind:todos="tomorrowTodos"></todos> 
</div>

我这样试了一下：

App.vue：

export default {
  name: 'app',
  components: {
    Todos
  },
  data() {
    return {
      initialTodos: [
        {title: '123', completed: true},
      ],
    }
  },
  mounted() {
    this.axios.get('http://homestead.app/api/todos').then((response) => {
      console.log(response.data)  
      this.initialTodos = response.data
    })
  }
}

Todos.vue

export default {
  props: ['initialTodos'],
  data() {
    return {
      todos: this.initialTodos ? [].concat(this.initialTodos) : [],
      newTodo: { title: '', completed: false }
    }
  },

Todos.vue 组件显示的是 {title: '123', completed: true}。

好像 axios 请求回调里的赋值

  mounted() {
    this.axios.get('http://homestead.app/api/todos').then((response) => {
      console.log(response.data)  
      this.initialTodos = response.data
    })
  }

并没导致 Todos 组件的重绘。

我在 npm run dev 过程中将 Todos.vue 组件里的

export default {
  props: ['initialTodos'],
  data() {
    return {
      todos: this.initialTodos ? [].concat(this.initialTodos) : [],
      newTodo: { title: '', completed: false }
    }
  },

// 改为
export default {
  props: ['initialTodos'],
  data() {
    return {
      todos: this.initialTodos,
      newTodo: { title: '', completed: false }
    }
  },

就可以了。

但是重新 npm run dev 的时候还是看不到 todo 列表。