利用npm包管理工具，进行安装 vuex

npm     install    vuex    --save

建立vuex 管理文件夹

在src 文件夹下建立vuex文件夹

在vuex下建立store.js 文件

store.js文件内容

现在store.js就是数据仓库

先引入 vue                                 import Vue from "vue";

在引入vuex                                import Vuex from 'vuex';

全局方法 Vue.use() 使用插件             Vue.use(Vuex);

const state={                        //定义数据          

    count:1

}

export default new Vuex.Store({                 //放到全局

    state

})

引入模板里

先引入：import store from '@/vuex/store'            @是映射src文件夹

然后在export default{      }                      声明

用           $store.state.count            找到数据

在数据仓库里使用方法

数据仓库

定义方法           用 const mutations={}

在放到全局    

模板

调用方法        $store.commit('add')       括号里一定要有引号

$store.commit()  调用什么方法

state访问状态对象

如果你嫌写   $store.state.count    太长    可以用三种方法来简写         只用 写count

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

在组件里的computed计算属性创建一个count方法

computed:{

        count(){

            return this.$store.state.count;

        }

}

{{$store.state.count}}   就等于    {{count}}

2、通过mapState的对象来赋值

用import引入mapState    

import {mapState} from 'vuex';         {   } 一定要有不然报错

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

computed:mapState({

        count:state=>state.count

})

3、通过mapState的数组来赋值

computed:mapState(["count"])

第3节：Mutations修改状态

在数据仓库

add方法加上一个参数n 就要在数据仓库理加

const mutations={

    add(state,n){

        state.count+=n;

    },

    reduce(state){

        state.count--;

    }

}

记住     add(state,n)   中的state  当它是默认的值，要加参数在他后面加

在模板里

$store.commit('add',10)        这个方法   的第一个参数是数据仓库里的方法名第二个才是参数

如果嫌这个不好看可以

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

import {mapState,mapMutations} from 'vuex'

2、添加methods属性，并加入mapMutations

methods:mapMutations([

        'add','reduce'

]),

就可以像平时一样写

getters计算过滤操作

比如我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100

在数据仓库里用const声明我们的getters属性

const getters = {

    count:function(state){

        return state.count +=100;

    }

}

在export default new Vuex.Store()  中引入

export default new Vuex.Store({

    state,mutations,getters

})

模板里

因为  computed 要加多一个方法   所以 要用到es6  的扩展运算符 ...

加入count 方法 

count(){

            return this.$store.getters.count;

        }

用mapGetters简化模板写法

actions异步修改状态

actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态

在数据仓库中声明actions

在actions里调用add和reduce两个方法

const actions ={

    addAction(context){

        context.commit('add',10)

    },

    reduceAction({commit}){

        commit('reduce')

    }

}

context：上下文对象，这里你可以理解称store本身。

{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。

模板中的使用

我们先复制两个以前有的按钮，并改成我们的actions里的方法名，分别是：addAction和reduceAction

改造一下我们的methods方法，首先还是用扩展运算符把mapMutations和mapActions加入。

methods:{

    ...mapMutations([   'add','reduce' ]),

    ...mapActions(['addAction','reduceAction'])

},

现在就和的 mapMutations 和  mapActions  的效果一样了

异步就是在      actions    的方法里面  加个    setTimeout()     迟缓执行 

就能迟缓3秒执行  减一   reduce  方法  

module模块组

在数据仓库中声明模块组

const moduleA={

    state,mutations,getters,actions

}

声明好后，我们需要修改原来 Vuex.Stroe里的值

export default new Vuex.Store({

    modules:{a:moduleA}

})

在模板中使用

现在我们要在模板中使用count状态，要用插值的形式写入。

{{$store.state.a.count}}

如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态

computed:{

    count(){

        return this.$store.state.a.count;

    }

},

就可以用{{count}}输出

参考     http://jspang.com/           的内容

可以在模板里可以改变   在方法里用 this.$store.state.count =12  改变  数据仓库里的count 的值