Vue.js简单的状态管理和 Vuex的几个核心概念使用。

---

由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。

• 如果多层组件嵌套使用，传递prop,和事件emit。都很不方便。
• 不方便对数据的修改进行历史记录。影响后续的调试！

为了解决这个问题，Vue 提供 vuex。

vuex 甚至集成到 vue-devtools，无需配置即可进行时光旅行调试。

---

---

Vuex

前置知识：理解什么是component!

组件就是函数。编程就是通过组织小的函数们来解决问题！类似组件！

于是问题就成为：如何传递arguments， 组件是怎样和它的环境互动的？

就像parameters和返回函数中的值。

在Vue中我们使用props来传递data到组件和组件事件，来和周边环境交互。

prop例子

message prop从父组件传递到子组件，通过一个template。

//childrenComponent
{
  props: ['message'],
  created(){
    console.log(message)
  },
  template: '<div>{{ message }}</div>'
}

// Parent Component
{
  template: `<child-component message="'hello'"></child-component>`,
  components: { childrenComponent }
}

event例子（见链接） 主要使用$emit方法和v-on

一个问题：

这是很好的移动数据的办法。只是有一个组件的问题：当嵌套3+层时，交互成了困难。

你不得不传递数据从组件A到B,然后从B到C，等等。 反向events, C emits to B, B to A等等。

于是使用state进行状态管理出现了，但这有缺陷，所以出现了Vue, 往后看