Vue.js进阶【2-2】vuex 状态管理入门

官网教程：https://vuex.vuejs.org/guide/  2018-10-12

如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。

为什么使用vuex?

vuex主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，那么，用vuex来维护共有的状态或数据会显得得心应手。

Vuex核心概念：

Vuex的核心是store，一个Store保存了应用的所有状态state。

store和全局变量有明显的不同：Vuex stores是反映式的，你不可以直接修改他的值，只能通过成员方法commiting mutations来修改。而成员方法可以理解成观察者模式，会自动更新所有地方。

Vuex入门：

https://segmentfault.com/a/1190000011716027  非常好的一篇入门文章（强烈建议多看几遍！！！）。

vue-cli环境下vuex安装：

npm install --save vuex

免安装 Vuex Hello World：

请用谷歌浏览器打开下面的HTML文件

功能：页面显示的时候Vuex保存的变量值增加1之后显示到主页的message之后。

  

    
{{ message }}
  

 

效果如下：

Vuex与*.vue组件：

当你创建了Vuex对象之后，并把vuex对象设置到Vue实例中，此时你就可以在任何组件中使用:

this.$store.state.*** 无论哪个组件都可以使用 

需要准备的知识有：

Vue Hello World

Vue构造函数的参数列表