vuex 是一个专门为 vue.js 设计的集中式状态管理架构。状态？我把它理解为在 data 中的属性需要共享给其他 vue 组件使用的部分，就叫做状态。简单的说就是 data 中需要共用的属性。比如：我们有几个页面要显示用户名称和用户等级，或者显示用户的地理位置。如果我们不把这些属性设置为状态，那每个页面遇到后，都会到服务器进行查找计算，返回后再显示。在中大型项目中会有很多共用的数据，所以尤大神给我们提供了 vuex。

初出茅庐 来个小 Demo

引入 vuex

1.利用 npm 包管理工具，进行安装 vuex。
项目初始化用的vue-cli克隆下来，然后在控制命令行中输入下边的命令就可以了。

npm  install vuex --save

需要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。还有项目名字不要和 vuex 一样会冲突 2.新建一个 vuex 文件夹（这个不是必须的），并在文件夹下新建 store.js 文件，文件中引入我们的 vue 和 vuex

import Vue from 'vue'
import Vuex from 'vuex'

3.使用我们 vuex，引入之后用 Vue.use 进行引用。
Vue.use(Vuex);
通过这三步的操作，vuex 就算引用成功了，接下来我们就可以尽情的玩耍了。

入门小 Demo：

我们这个小案例先声明一个 state 的 count 状态，在页面中使用显示这个 count，然后可以利用按钮进行加减， 1.现在我们 store.js 文件里增加一个常量对象。store.js 文件就是我们在引入 vuex 时的那个文件。

const state = {
  count: 1,
}

2.用 export default 封装代码，让外部可以引用。

export default new Vuex.Store({
  state,
})

3.新建一个 vue 的模板，位置在 components 文件夹下，名字叫 count.vue。在模板中我们引入我们刚建的 store.js 文件，并在模板中用$store.state.count 输出 count 的值。

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>
        <h3>{{$store.state.count}}</h3>
    </div>
</template>
<script>
    import store from '@/vuex/store'
    export default{
        data(){
            return{
                msg:'Hello Vuex',

            }
        },
        store

    }
</script>

4.在 store.js 文件中加入两个改变 state 的方法。

const mutations = {
  add(state) {
    state.count++
  },
  reduce(state) {
    state.count--
  },
}

这里的 mutations 是固定的写法，意思是改变的，只知道我们要改变 state 的数值的方法，必须写在 mutations 里就可以了。 5.在 count.vue 模板中加入两个按钮，并调用 mutations 中的方法。​

<div>
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit('reduce')">-</button>
</div>

这样进行预览就可以实现对 vuex 中的 count 进行加减了。
​

state 访问状态对象

在第 1 节我们已经写了一个 const state ，这个就是我们说的访问状态对象，它就是我们 SPA（单页应用程序）中的共享值。今天我们主要学习状态对象赋值给内部对象，也就是把 stroe.js 中的值，赋值给我们模板里 data 中的值。我们有三种赋值方式，我们一个一个来学习一下。

一、通过 computed 的计算属性直接赋值

computed 属性可以在输出前，对 data 中的值进行改变，我们就利用这种特性把 store.js 中的 state 值赋值给我们模板中的 data 值。

computed:{
    count(){
        return this.$store.state.count;
    }
}

这里需要注意的是 return this.$store.state.count这一句，一定要写this，要不你会找不到$store 的。这种写法很好理解，但是写起来是比较麻烦的，那我们来看看第二种写法。

二、通过 mapState 的对象来赋值

我们首先要用 import 引入 mapState。

import { mapState } from 'vuex'

然后还在 computed 计算属性里写如下代码：

computed: mapState({
  count: (state) => state.count,
})

这里我们使用 ES6 的箭头函数来给 count 赋值。

三、通过 mapState 的数组来赋值

computed: mapState(['count'])

这个算是最简单的写法了，在实际项目开发当中也经常这样使用。
这就是三种赋值方式，是不是很简单，虽然简单，但是在实际项目中经常使用，一定要自己动手练习两遍啊。
​

Mutations 修改状态

$store.commit( )

Vuex 提供了 commit 方法来修改状态，我们粘贴出第一节课的代码内容，简单回顾一下，我们在 button 上的修改方法。

<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>

store.js 文件：

const mutations = {
  add(state) {
    state.count++
  },
  reduce(state) {
    state.count--
  },
}

传值：

这只是一个最简单的修改状态的操作，在实际项目中我们常常需要在修改状态时传值。比如上边的例子，是我们每次只加 1，而现在我们要通过所传的值进行相加。其实我们只需要在 Mutations 里再加上一个参数，并在 commit 的时候传递就就可以了。我们来看具体代码：
现在 store.js 文件里给 add 方法加上一个参数 n。添加的地方我已经标黄了。​

const mutations = {
  add(state, n) {
    state.count += n
  },
  reduce(state) {
    state.count--
  },
}

在 Count.vue 里修改按钮的 commit( )方法传递的参数，我们传递 10，意思就是每次加 10.

<p>
   <button @click="$store.commit('add',10)">+</button>
   <button @click="$store.commit('reduce')">-</button>
</p>

这样两个简单的修改我们就完成了传值，我们可以在浏览器中实验一下了。

模板获取 Mutations 方法

实际开发中我们也不喜欢看到$store.commit( )这样的方法出现，我们希望跟调用模板里的方法一样调用。
例如：@click=”reduce” 就和没引用 vuex 插件一样。
要达到这种写法，只需要简单的两部就可以了： 1.在模板 count.vue 里用 import 引入我们的 mapMutations：

import { mapState, mapMutations } from 'vuex'

2.在模板的