vue 2.0学习之vuex的初步使用与理解，mapMutations辅助函数传参等相关问题。

之前做的是react项目，一直在使用redux，最近看了vuex，顺便研究了下。总体来说，两个很接近，个人觉得差不多。列了几点主要的步骤，记录下~

1、新建文件夹，vuex，里面存放的是store相关的js，跟redux一样，相关的文件分离开来。

2、store.js的内容，该js为主入口，也是默认导出的，全局可import这个js来获取和修改state数据。示例是加减计数的例子，所以有个初始值count=0.

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as actions from './actions'
import * as mutations from './mutations'

Vue.use(Vuex);

const state = {
  count: 0
};

const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations
});

export default store

3、getters.js文件是获取默认state的值的，该文件将所以state绑定到store里去，别的地方都可以共享state。

export const count = state => state.count;

4、actions.js是用户操作，跟react-redux里面的action很相似，这里面有2个提交操作，点击增加和点击减少。

export const increase = ({commit}) => commit('increase');
export const decrease = ({commit}) => commit('decrease');

5、mutations.js文件是真实的数据变化，比如增加多少，减少多少，或者对值的修改，这里的写法是传参的形式。第一个参数state是默认的，第二个参数则是点击时绑定传过来的参数。

export const increase = (state,m) => {
  state.count += m
};
export const decrease = (state,n) => {
  state.count -= n
};

这样的话，vuex的相关js文件以及添加完毕，现在需要对view层进行展示的代码修改。

6、新建一个Number.vue组件，用了展示效果。两个按钮，对应两个action，绑定点击事件并把参数传入。我的是加6，减4。通过mapGetters来拿到每次的count的值，通过mapMutations来拿到以及写好的两个点击事件，并绑定到对应的按钮上。

<template>
  <div class="number">
    <p>数字是: {{count}}</p>
    <button @click="increase(6)">加</button>
    <button @click="decrease(4)">减</button>
  </div>
</template>
<script>
  import store from '../../../src/vuex/stores'
  import {mapGetters, mapMutations} from 'vuex'

  export default {
    computed: {
      ...mapGetters([
        'count'
      ])
    },
    methods: {
      ...mapMutations([
        'increase',
        'decrease'
      ])
    },
  }
</script>
<style scoped>

</style>

7、在主入口文件main.js，import store，再在new的构造器里传入store即可。