vuex2.0基本使用---3、终极版

1、初始化项目：vue init webpack vuex_demo
2、安装vuex：npm install vuex -D
3、在src文件夹里新建一个vuex文件夹
4、在vuex文件夹里依次新建一个index.js、actions.js、mutations.js、mutations-types.js、 getters.js。
5、在index.js里写上以下代码：

import Vue from 'vue'
import Vuex from 'vuex'

import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: { mutations },
  actions
})

6、在actions.js里写上以下代码：

import * as types from './mutation-types'

// 处理业务逻辑
const actions = {
  INCREMENT: (context) => {
    context.commit(types.INCREMENT)
  },
  DECREMENT: (context) => {
    context.commit(types.DECREMENT)
  },
  INCREMENTTWO: (context) => {
    context.commit(types.INCREMENTTWO)
  }
}

export default actions

7、在mutations.js里写上以下代码：

import { INCREMENT, DECREMENT, INCREMENTTWO } from './mutation-types'
import getters from './getters'

// 处理状态(数据)变化
const mutations = {
  [INCREMENT]: state => state.count++,
  [DECREMENT]: state => state.count--,
  [INCREMENTTWO]: (state) => {
    state.count = state.count + 2
    return state.count
  }
}

const state = {
  count: 20
}

export default {
  mutations: mutations,
  state: state,
  getters: getters
}

8、在mutations-types.js里写上以下代码：

export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
export const INCREMENTTWO = 'INCREMENTTWO'

9、在getters.js里写上以下代码：

const getters = {
  count (state) {
    return state.count
  }
}

export default getters

10、在main.js里加上以下代码：

import Vue from 'vue'
import App from './App'
import router from './router'

import Vuex from 'vuex'
import store from './vuex/'

Vue.use(Vuex)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  store,
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

11、在components文件夹里新建一个Count.vue组件
12、在Count.vue组件写上以下代码：

<template>
  <div>
    <p>{{ count }}</p>
    <p>
      <button @click="increment()">+</button>
      <button @click="decrement()">-</button>
      <button @click="decrementTwo()">+2</button>
    </p>
  </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
export default {
  name: 'Count',
  methods: {
    // 对象写法：
    ...mapActions({
      increment: 'INCREMENT',
      decrement: 'DECREMENT',
      decrementTwo: 'INCREMENTTWO'
    })
  },
  computed: {
    // 对象写法：
    ...mapGetters({
      count: 'count'
    })
  }
}
</script>

12、启动项目就可以查看效果了