vueX

 一：什么是vuex？

 1.1： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态（他是集中管理数据的工具）。 

1.2 vuex的优点： - 可以实现父子传值，兄弟传值，隔代传值 - 能够存放组件之间共享的数据 - 解决大中型项目中数据共享的问题 ####

 二：vuex的组成？ 

1.state：存储状态（变量） 

2. getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们 在组件中使用$ store 

3. mutations： 修 改 状 态 ， 并 且 是 同 步 的 。 在 组 件 中 使 用$ store.commit(''",data)。这个和我们组件中的自定义事件类似。

 4. actions：异步操作。在组件中使用是$store.dispath('自定义事件名',''传递的参数) 

5. 5. modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。 

  三：玩转vuex的两种方法： 

3.1 第一种： 

3.1.1 安装：

javascript npm installl vuex --save

3.1.2 创建一个store文件夹，里面放入index.js。在main.js里面引入，注册。 

3.1.3 操作一波页面

<template>
  <div class="home">
    <h3>这是主页</h3>
   <button @click="prev()">减</button>
    {{this.$store.state.count}}
    <button @click="next">加</button>
 </div>
</template>
<script>
import { Sumcode } from '../http/api';

export default {
  name: 'Home',

  methods: {
      next(){
      this.$store.dispatch('next',)//通过dispatch请求发送到action
    } 
    },
    }
</script>

```
###### store.js
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//用来存储数据的
  state: {
    count: 1
  },
  mutations: {
  //在motations里面我们改变state的状态来实现数量的加加减减
    next(state,value){
      state.count++;
     },
    prev(state){
      state.count--;
    
    },
  
  },
  actions: {
  //在这里我们异步操作 发送到motation里面
    next(context){
 
      context.commit('next')
    },
    prev(context){
    
      context.commit('prev')
    },
  },
  //这个也就是我们上面所说的store 的子模块。这样的话比较清晰
  modules: {},
  getters:{}//这个相当于我们vue中的computed计算属性
 // 页面中我们直接通过this.$store.state.getters.data
})