Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
Vuex的核心

vuex由以下几部分组成：

• state
• mutations
• getters
• actions
• modules

state里面就是存放项目中需要多组件共享的状态
mutations就是存放更改state里状态的方法
getters就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态。
actions就是mutation的加强版，它可以通过commit mutations中的方法来改变状态，最重要的是它可以进行异步操作。
modules顾名思义，就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。

实例理解vuex

main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store.js'
var vm = new Vue({
        el: '#app',
        router,
        store,
        template: '<App/>',
        components: { App }
})
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {  //数据存储
        count:10,
};
const mutations = { //数据处理
  increment(state) {
        state.count++;
  },
  decrement(state) {
        state.count--;
  }
};
const actions = { //=处理你要怎么做，比如异步请求，判断，流程控制等commit讲请求提交到mutation里面
        increment:({commit})=>{
                commit('increment');
        },
        decrement:({commit})=>{
                commit('decrement');
        },
        increDouble:({commit,state})=>{
                if(state.count%2==0){
                         commit('increment');
                }
        },
        decreOnly:({commit,state})=>{
                if (state.count%2!=0) {
                        commit('decrement');
                 }
         },
        clickAnsy:({commit})=>{//可以通过promise异步获取数据
                new Promise(function(resolve, reject) {
                        setTimeout(()=>{
                                commit('increment');
                                resolve();
                        },1000)
                });
         }
}
const getters={
        nowNum(state){
                 return state.count;
        },
        getOdd(state) {
                return state.count%2==0?'偶数':'奇数';
         }
}
export default new Vuex.Store({
        state,
        mutations,
        actions,
        getters
});
App.Vue
<template>
  <div id="app">
    <h2>vue全局组件use使用</h2>
    <h2>vuex的使用</h2>
    <input type="button" value="增加" @click="increment"/>
    <input type="button" value="减少" @click="decrement"/>
    <input type="button" value="偶数时可点击+" @click="increDouble"/>
    <input type="button" value="奇数时可点击-" @click="decreOnly"/>
    <input type="button" value="异步处理" @click="clickAnsy"/>
    <div>现在的数字为：{{nowNum}}  它现在是{{getOdd}}</div>
    <button @click="test"> 1 </button>
  </div>
</template>

<script>
import {mapActions,mapGetters} from 'vuex'
export default {
  name: 'app',
  computed:{
    ...mapGetters([
      'nowNum',
      'getOdd'
    ])
  },
  methods:{
    ...mapActions([
              'increment',
              'decrement',
              'increDouble',
              'decreOnly',
              'clickAnsy'
            ]),
      test(){
        this.$store.dispatch('increment')
      }
  },
   mounted:function () {
     console.log(this.$store)
   }
}
</script>

现在vuex内的定义已经完成，可以再组件内调用，获取了

获取state内值方法一：

computed: {
     count () {
      return this.$store.state.count
     }
  }

方法二 利用mapState 辅助函数

import { mapState } from 'vuex'
export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

对象展开运算符
mapState函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed
属性。但是自从有了对象展开运算符（现处于 ECMASCript 提案 stage-3 阶段），我们可以极大地简化写法：

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：

store.commit('increment')

提交载荷（Payload）
你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：

mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

在组件中提交 Mutations

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations([
      'increment' // 映射 this.increment() 为 this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
    })
  }
}

Actions

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

组件内 可以通过Action 通过 store.dispatch 方法触发：触发
Actions 支持同样的载荷方式和对象方式进行分发：

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})
// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

vuex内的actions 会通过第二参数获取

const actions = {
        increment:({commit} , test)=>{
                commit('increment' ,test);
        },
 }

modules

通过modules 创建的vuex state 是分模块的，其他 mutations 和 actions 都不分模块 如果重复命名会调用两次 getters函数命名重复会报错

    使用的时候 获取state值 使用  this.$store.(模块名)+字段名   
    调用actions mutations 同单store
    注意分modules 的vuex 的模块只
      export default {
            state,
            getters,
            actions,
            mutations
      }


    不实例化vuex