1、什么是vuex?

      vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（通俗一点的说Vuex就是存储数据的工具，类似于cookie、sessionStorage、localStorage）。

2、vuex和cookie、sessionStorage、localStorage的区别：

      cookie、sessionStorage、localStorage是浏览器存储，每当页面刷新时数据依然存在（在过期时间内），而vuex在页面刷新时存储的数据会丢失。

3、vuex一般用于大型的SPA应用，否则最好不要使用vuex。

4、基本用法：

     npm安装： npm install vuex --save

    新建一个store文件夹，在该文件夹下新建一个index.js文件，机构目录入下图：

                  

    Vuex有以下几个选项：state、mutations、actions、getters、module

   在该index.js文件里:

import Vue from 'vue';  //引入vueimport Vuex from 'vuex';//引入vuexVue.use(Vuex); //新建一个store仓库， state 是存储数据的const store=new Vuex.Store({    state:{        count:12    }})export default store;

     4.1、读取数据： 在任何组件里可以通过$store.state.count来读取数据

   

{
   {$store.state.count}}

 或者通过计算属性进行处理

   

结果如下图：

    4.2、修改数据：

   在组件内，来自store的数据只能读取，不能手动修改，改变store中数据的唯一途径就是显式的提交mutations。

   在以下demo中实现加1和减一的效果：

    

const store=new Vuex.Store({    //选项一：state用来存储数据的    state:{        count:12    },    //选项二：mutations用来修改state中的数据的    mutations:{        increament(state){            console.log(state);            //以上打印的是 count:12 ，在这里可以获取到state中的count数据，所以可以在这里直接进行修改            state.count ++;        },        decrease(state){
    　　　　　　　console.log(state);            state.count --;        }    }})

         加1的结果：

            

 

      减1的结果：

      

 

   以上结果显式通过mutations已经成功的修改了state中的数据。

   此外mutations还可以接受第二个参数：

   修改之前的代码：

methods:{
         //自定义一个num传给mutations      addOne(){          let num=10;          this.$store.commit('increament',num);      },      reduceOne(){          let num=5;          this.$store.commit('decrease',num);      }  }

mutations:{        increament(state,num){            console.log(num); //打印的是10            state.count+=num;        },        decrease(state,num){            console.log(num); //打印的是5            state.count-=num;        }    }

 此时，加10和减5修改成功。

  5、高级用法：

     Vuex除了state、mutations外还有getters、actions、modules选项

       5.1、getters：

         “Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算”

   

      demo:过滤出偶数

const store=new Vuex.Store({    //选项一：state用来存储数据的    state:{        count:[1,2,3,4,5,6,7,8,9,10]    },    //选项二：mutations用来修改state中的数据的    mutations:{        increament(state,num){            state.count+=num;        },        decrease(state,num){            state.count-=num;        }    },    //选项三：getters相当于计算属性    getters:{        filterData(state){            console.log(state)            //过滤出偶数            return state.count.filter(item=>item%2==0)        }    }})

结果如下：

 

   5.2、actions:异步操作state数据，一般用于后台请求数据。

           mutation里尽量不要异步操作数据，如果异步操作数据了，组件在commit后数据不能立即改变，而且也不知道什么会改变，actions就是专门处理异步操作的。

           demo:3s后原数据加20

      

  store

  

const store=new Vuex.Store({    //选项一：state用来存储数据的    state:{        list:[1,2,3,4,5,6,7,8,9,10],        count:12,    },    //选项二：mutations用来修改state中的数据的    mutations:{        increament(state,num){            state.count+=num;        },        decrease(state,num){            state.count-=num;        }    },    //选项三：getters相当于计算属性    getters:{        filterData(state){            console.log(state)            //过滤出偶数            return state.list.filter(item=>item%2==0)        }    },    //选项四：actions实现异步操作    actions:{        asyncIncreament(content,num){            return new Promise(resolve=>{                setTimeout(()=>{                    content.commit('increament',num);                    resolve();                },3000)            })        }    }})export default store;

结果如下：

   点击 “异步处理”按钮3s后页面的数据由原来的12变为32，修改成功后控制台打印结果32

   

5.3、module: 模块化处理

    module是用来将store分割到不同的模块，当你的项目足够大时，store里的state、getters、mutations、actions会非常多，都放在mian.js里不是很友好，使用modules可以把它们写到不同的文件中。每个module拥有自己的state、getters、mutations、        　actions，而且可以多层嵌套。

  demo:

         目录结构：

         

 

   模块a:

     

//模块Aexport default{    //选项一：state用来存储数据的    state:{        list:[1,2,3,4,5,6,7,8,9,10],        countOne:12,    },    //选项二：mutations用来修改state中的数据的    mutations:{        increamentOne(state,num){            state.countOne+=num;        },        decreaseOne(state,num){            state.countOne-=num;        }    },    //选项三：getters相当于计算属性    getters:{        filterDataOne(countOne){            //过滤出偶数            return countOne.list.filter(item=>item%2==0)        }    },    //选项四：actions实现异步操作    actions:{        asyncIncreamenta(content,num){            return new Promise(resolve=>{                setTimeout(()=>{                    content.commit('increamentOne',num);                    resolve();                },1000)            })        }    }}

模块b:

//模块Bexport default{        //选项一：state用来存储数据的    state:{        list:[1,2,3,4,5,6,7,8,9,10],        countTwo:52,    },    //选项二：mutations用来修改state中的数据的    mutations:{        increament(state,num){            state.countTwo+=num;        },        decrease(state,num){            state.count-=num;        }    },    //选项三：getters相当于计算属性    getters:{        filterData(state){            //过滤出偶数            return state.list.filter(item=>item%2==0)        }    },    //选项四：actions实现异步操作    actions:{        asyncIncreamentb(content,num){            return new Promise(resolve=>{                setTimeout(()=>{                    content.commit('increament',num);                    resolve();                },1000)            })        }    }}

 store下的index.js:

   

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);import moduleA from './moduleA.js'import moduleB from './moduleB.js'const store=new Vuex.Store({   modules:{         a:moduleA,         b:moduleB   }})export default store;

 点击“异步处理”按钮 1s后模块a和模块b的state的数据发生了改变。

6、mapState 、mapGetters、mapActions：

6.1、mapState  通过this.$store.state.count 获取store中的数据写法很长，所以为了简化写法可以使用 mapState 进行操作，

结果如下：

  

结果显示：通过mapState获取的数据和通过this.$store获取的数据一致。

6.2、mapGetters

结果如下：

 

6.3、mapAction:

  

点击“mapActions”按钮1后结果如下：

模块a的数据增加了100