引入vuex

1.利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。

npm install vuex --save

需要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。

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

就是这个程序，不过我们这次要用的是vuex来进行制作，并实现数据的共享。

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 的值。

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

const mutations={

add(state){

  state.count++;

  },

   reduce(state){

     state.count--;

}}

这里的mutations是固定的写法，意思是改变的，我们到时候会用一节课专门讲这个mutations，所以你先不用着急，只知道我们要改变state的数值的方法，必须写在mutations里就可以了。

5.在count.vue模板中加入两个按钮，并调用mutations中的方法。

这样进行预览就可以实现对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修改状态

上节课我们学习了怎么样读取state，那今天我们学习一下怎么样修改状态。这个常量我们在第一节课的时候也碰到过，并且进行了加减的操作。那这节课我们就具体学习一下，如何操作Mutations。

$store.commit( )

Vuex提供了commit方法来修改状态，我们粘贴出第一节课的代码内容，简单回顾一下，我们在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.

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

模板获取Mutations方法

实际开发中我们也不喜欢看到$store.commit( )这样的方法出现，我们希望跟调用模板里的方法一样调用。

例如：@click=”reduce” 就和没引用vuex插件一样。

要达到这种写法，只需要简单的两部就可以了：

1.在模板count.vue里用import 引入我们的mapMutations：

import { mapState,mapMutations } from 'vuex';

2.在模板的

vuex