复习一下vuex

store下的index.js
import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)
const state = {

  sum: 0

}

// actions: 用于响应组件中的动作

const actions = {

  jia (context, value) {

    context.commit('JIA', value)

  },

  jian (context, value) {

    context.commit('JIAN', value)

  }

}

// mutations: 用于操作数据（state）

const mutations = {

  JIA (state, value) {

    state.sum += value

  },

  JIAN (state, value) {

    state.sum -= value

  }

}

// getters: 用于将state中的数据加工

const getters = {

  bigSum(state) {

    return state.sum * 10

  }

}

export default new Vuex.Store({

  state,

  actions,

  mutations,

  getters

})

组件用例：

<template>

  <div class="hello">

    <h5>{{sum}}</h5>

    <h5>{{bigSum}}</h5>

    <div>{{he}}</div>

    <button @click="jia(1)">+</button>

  </div>

</template>

<script>

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

export default {

  name: '',

  data() {

    return{

    }

  },

  methods: {

    ...mapActions(['jia']),

    ...mapMutations(['JIAN'])

  },

  computed: {

    // sum () {

    //   return this.$store.state.sum

    // },

    // bigSum () {

    //   return this.$store.getters.bigSum

    // },

    ...mapState({he: 'sum'}), // 对象写法

    ...mapState(['sum']), // 数组写法

    ...mapGetters(['bigSum'])

  },

}

</script>