Vuex的使用

//1.在store的index.js中如下
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    // vuex 中的状态
  state: {
    conter: 50
  },
    //组件获取状态的函数
  getters: {
    getSum: (state) => { return state.conter}
  },
    // 对状态操作方法
  mutations: {
    PLUS(state，传递的参数){
      state.conter++
    },
    MITT(state){
      state.conter--
    }
  },
     // 数据单项流动方式
  actions: {
    onPlus({commit}){
      commit('PLUS')
    },
    onMitt({commit}，传递的参数){
      commit('MITT'，传递的参数)
    }
  },
  // 模块
  modules: {
  }
})

// 在组件中
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{sum }}</p>
    <button @click="mitt">-1</button>
  </div>
</template>
<script>
export default{
data() {
  return {
    sum: null
  }
},
methods: {
  mitt(传递的参数){
    this.$store.dispatch('onMitt'，传递的参数)
    this.sum = this.$store.getters.getSum
  }
},
created(){
  this.sum = this.$store.getters.getSum
}
}
</script>