干嘛的？

用于解决组件之间数据共享，数据的集中处理，是一种状态管理的设计模式。

什么是vuex ？单项数据流

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理器，采用 集中式存储 管理所有组件的状态。

vuex的原理其实非常简单，它为什么能实现所有的组件共享同一份数据？

• 因为vuex生成了一个store实例，并且把这个实例挂在了所有的组件上，所有的组件引用的都是同一个store实例。
• store实例上有数据，有方法，方法改变的都是store实例上的数据。由于其他组件引用的是同样的实例，所以一个组件改变了store上的数据，导致另一个组件上的数据也会改变，就像是一个对象的引用。

基本使用

#安装
yarn add vuex
#引入 一般我们会在src根目录下创建一个store的文件夹，
#下面写index.js来实现相关的存储方法（组件共用数据）
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

vuex的组成部分（应用结构）

vuex的工作流程

1.通过this.$store.dispatch()向vuex中的actions派发一个事件同时传递一个参数
methods:{
        handleClick(city){
            /* this.$store.dispatch 向vuex派发一个事件,同时传递一个参数 */
            this.$store.dispatch("changeCity",city)
        }
}
2.vuex-actions中接收dispatch派发过来的事件和参数
export default new Vuex.Store({
  ...
  actions: {
    changeCity(ctx,city){
      /* ctx表示上下文  this.$store
      city是自定义事件传递过来的参数 */
     3.在actions中使用commit方法向mutations提交一个事件,同时传递一个参数
      ctx.commit("toggleCity",city)
    }
  }
})

4.在mutations中接收commit方法提交过来的事件,同时改变state中的状态
export default new Vuex.Store({
  state: {
    city:"武汉"
  },
  mutations: {
    toggleCity(state,city){
      state.city = city;
    }
  }
})

数据持久化 =>设置缓存机制

function getCity(){
   let defaultCity = "天门";
   if(localStorage.getItem("city")){
     defaultCity = localStorage.getItem("city")
   }
   return defaultCity;
}
export default new Vuex.Store({
  state: {
    city:getCity()
  },
  mutations: {
    changeCity(state,city){
      state.city = city;
    }
  },
  actions: {
    changeCity(ctx,city){
      ctx.commit("changeCity",city)
        //1.设置缓存
      localStorage.setItem("city",city)
    }
  }
})

State

State负责存储整个应用的状态数据，一般需要在使用的时候在跟节点注入store对象，后期就可以使用this.$store.state直接获取状态。一般是在main.js文件中引入store的文件，从而使用。（vue spa应用中）

//store为实例化生成的
import store from './store'
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

这个store可以理解为一个容器，包含着应用中的state等。实例化生成store的过程是：

const mutations = {...};
const actions = {...};
const state = {...};
Vuex.Store({
  state,
  actions,
  mutation
});

后续在组件中使用的过程中，如果想要获取对应的状态你就可以直接使用this.$store.state获取，当然，也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去，如

mapState

state: {
    count:0,
    city:"武汉",
    name:"港啊",
    age:20,
    sex:"男"
  },

<template>
  <div class="home">
    <h2 >{{city}}</h2>
    <h2 >{{age}}</h2>
  </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
  name: 'home',
  computed:{
    ...mapState(['city','name','age','sex'])
  }
}
</script>

• 映射

Mutations

Mutations的中文意思是“变化”，利用它可以更改状态，本质就是用来处理数据的函数，其接收唯一参数值state。store.commit(mutationName)是用来触发一个mutation的方法。需要记住的是，定义的mutation必须是同步函数，否则devtool中的数据将可能出现问题，使状态改变变得难以跟踪。
| 直接派发一个事件给mutations

export default {
  methods: {
    handleClick() {
      this.$store.commit('changeCity')
    }
  }
}

mutations:{
    changeCity(state){
        state.city="成都"
    }
}

或者使用辅助函数mapMutations直接将触发函数映射到methods上，这样就能在元素事件绑定上直接使用了。如：

mapMutations

<template>
  <div class="home">
    <h2>{{this.$store.state.count}}</h2>
    <button @click="myIncrease">增加</button>
    <button @click="myDecrease">减少</button>
  </div>
</template>

<script>
import {mapMutations} from 'vuex';
export default {
  name: 'home',
  methods:{
     ...mapMutations(['myIncrease','myDecrease']) 
  }
}
</script>

 mutations: {
    myIncrease(state){
      state.count+=1
    },
    myDecrease(state){
      state.count-=1
    }
  },

• 映射

Actions

Actions也可以用于改变状态，不过是通过触发mutation实现的，重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类似，也是绑定在组件的methods上的。如果选择直接触发的话，使用this.$store.dispatch(actionName)方法。action内部支持异步方法，这是很重要的一点区别。

mapActions

export default new Vuex.Store({
  state: {
    count:0
  },
  /* 异步操作,处理一些复杂的业务逻辑 */
  actions: {
    increase(ctx){
      ctx.commit("myIncrease")
    },
    decrease(ctx){
      ctx.commit("myDecrease")
    }
  },
  /* 简单的更改状态(state)的逻辑*/
  mutations: {
     myIncrease(state){
       state.count+=1;
     },
     myDecrease(state){
       state.count-=1;
     }
  },
})

• 映射 ```css

5.components/amount.vue

6.components/counter.vue

```