【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/