【vue store的使用方法】（this.$store.state，this.$store.getters ，this.$store.dispatch ，this.$store.commit）

vue 页面文件

<template>
    <div>
      {{this.$store.state.count}}<br/>
      {{count}}<br/>
      {{this.$store.getters.changeCount}}<br/>
      <el-button type="primary" @click="add">主要按钮</el-button>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'home',
  computed: {
    ...mapState([
      'count'
    ])
  },
  methods: {
    add () {
      this.$store.dispatch('addFun', 10) // actions
　　　 this.$store.commit('add',10) //mutations

    }
  },
  mounted: {
  }
}
</script>

<style scoped>

</style>

 

store文件

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

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 1
  },
  getters: {
    changeCount: state => {
      return state.count + 1
    }
  },
  mutations: {
    add (state, n) {
      state.count = state.count + n
    }
  },
  actions: {
    addFun (context, n) {
      context.commit('add', n)
    }
  }
})
export default store

　　

http://www.axios-js.com/zh-cn/docs/