Vuex 初步概念

(以下的文章包含个人观点)

什么是vuex

vuex相当于其他语言中的全局变量（跟PHP的$_GLOBALS相似)，vuex通过mutations将全局变量封装，使得对于变量的控制更加的紧凑。

vuex包含了3个概念：
1.state ： 我们将全局变量声明在state里面
2.mutations： 我们将改变全局变量的方法声明到 mutations里面
3.commit: 我们通过commit 去调用mutations里面的方法，以改变state的状态。

在使用store环节中，将提到这三个概念的使用。

从上面的三个概念我们可以确定一个流程，也就是我们通过视图中的接口去调用commit去调用mutations，然后mutations改变state的状态，state再将状态返回到视图中。

view->commit->mutations->state->view。

为什么要使用vuex

为了让模块跟模块的通讯更加简单，官方文档提示如果是小项目没有必要使用全局变量， 直接使用bus即可，（bus传送门）.我个人对此却有不同的看法， 如果组件数量超过2个，那么使用vuex是很好的选择，对于小模块，就没什么必要了。

使用方法

声明store

vuex的使用需要导入vuex.js，下载地址

首先我们要“申明全局变量”，我们可以通过Vuex.Store方法来注册一个vuex对象，vuex对象称之为store，也就是仓库的意思，下面的示例来自官方文档：
const store = new Vuex.Store({ state:{ count:0 }, mutations:{ increment(state){ state.count++; } } })

上面这个例子注册了一个全局变量的数组store，数组里面包含了一个变量count,如果我们要改变这个变量的值，那么就需要在 mutations 里面定义方法去改变他。

使用store

我们需要将store(也就是我们上面声明的那个全局数组)应用到组件中是非常简单的，我们可以通过组件的计算属性（computed）去返回store中某个变量的值，当然methods也可以返回，但是效率不高。

返回方法：
Vue.component('counter',{ template:'

{{count}}

', computed:{ count:()=>store.state.count } })
在上面我们注册了一个组件，并声明了一个名为count的computed， 他返回了store 中state的count

先更新到这里官方文档传送门