前言：本文主要用于帮助笔者和新人理解vuex的使用，因个人能力有限，有什么建议可以留言一起探讨。

vuex就是一个前端的公共仓库（状态管理工具），用于平行组件间的通信（传值，双向数据绑定），使用方法如下：

安装：根目录下命令窗口输入： npm install vuex --save

在src下新建文件夹store（也有用vuex的，名字随便起，只要你知道是这个文件夹是干什么的就行），在store文件夹下新建index.js文件（也有在vuex文件夹下新建store.js的，这个同上，你喜欢就好），二者的区别一会在下文中会提到。

在store/index.js里注入依赖，并使用VUE.use方法：

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

在main.js下同样引入，并把store对象引入到Vue实例中：

import Vuex from 'vuex'
Vue.use(Vuex)

import store from './store'   或者   import store from './vuex/store'

(这里说明下：如果你在src下创建的文件夹是store/index.js,那么在main.js中引入store时可以写成import store from './store'，它等同于：import store from './store/index'; 即，如果文件夹名是store，那么index.js可以省略不写；如果你在src下创建的文件夹是vuex/store.js,那么在main.js中引入store时必须写成：import store from './vuex/store';)

...

new Vue({
  el: '#app',
  store,//把store引入到Vue实例中
  router,
  components: { App },
  render: (createElement) => {
        return createElement(App);
    }

})

然后，再回到store/index.js文件里，创建一个state常量用于存储公共状态：

const state = {  //仓库共有属性的集合，用于存储公共状态，只储存
count:0  //定义了一个公共属性，并初始化赋值为 0 

}

别忘了用export default 封装代码，这样才能让外部可以引用：

export default new Vuex.Store({
    state

});

这里特别说明下，常量state只用于存储状态，不能在state里直接修改状态

如果要修改状态，需要在store/index.js中再创建一个mutations常量，mutations是专门用于修改state常量中的属性状态的对象，在mutations对象中可以定义一系列方法，专门用于修改statestate常量中保存的属性的状态：

const mutations = {  //专门用于修改state里的属性的方法集合
add(state){  //方法名(add)随便起，参数state是固定写法
state.count++
},
reduce(state){  //方法名(reduce)随便起，参数state是固定写法
state.count--
}

}

同样，别忘了把mutations对象注入在Vuex.Store实例里，这样才能让外部可以引用：

export default new Vuex.Store({
    state,
    mutations

});

总结下，现在我们创建了vuex的store仓库（store文件夹），并在index.js里设置了两个常量：state和mutations，它们分别用于存储和修改公共状态；

store/index.js文件：

并且在main.js中全局引入了vuex的store实例；

main.js文件： 

那么我们在组件中应该如何使用呢？

这里，我将结合上文中的内容在组件中做一个简单的运用：

在src的components文件夹下新建一个Count.vue文件(别忘了写路由)，内容如下：

大家可以看出来，在组件中：

1.在插值表达式{{  }}中使用state的状态属性count时，写法是：{{$store.state.count}}；

2.如果需要修改这个count属性的状态值，就需要使用$store的commit方法：$store.commit('add') 、store.commit('reduce')；

这里需要说明的是：commit()方法接收两个参数：第一个参数是mutations里的方法名，如add和reduce；并且特别需要注意的是：mutations中的方法名可以随便起，但在组件中用commit()方法调用时，必须与mutations里的方法名一一对应！

比如：我想在组件中点击按钮，让count++，因为mutations中让count++的方法名是add，那么在调用时，commit()方法中的第一个参数就必须也是'add' !

看到这里，估计大家就想到了，那如果我不想让count每次只加1,每次加2行不行？加10行不行，那加100呢？再进一步，无论是2还是10或者100，这个值我不想让你（vuex）预先定义好，而是由我（组件）在使用时再给你，行不行？

答案是肯定的，这就要用到commit()方法中的第二个参数payload，payload可以翻译成‘负载’，简单点说就是传参，payload可以是任何类型：String、Object、Number、Function、Array、Boolean，具体看实际中的应用了，以本文为例，假如我想每次点击按钮让count+5，那么在组件中应该写为：

<button @click="$store.commit('add',5)">加</button>  //调用mutations中的add方法，并把数字5传过去

在mutations的add方法中，应该写成：

add(state,n){  //把实参5赋给形参n，state是固定写法

state.count += n;

}

这样就ok了。

以上就是vuex的使用，这里主要介绍了vuex的两个重要的属性和方法state和mutations，以及如何简单的在组件中使用和修改在vuex中的公共状态，后面的文章将进一步讲解vuex的其他属性和方法以及使用技巧