【vue store的小总结】

<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)
    }
  },
  mounted: {
  }
}
</script>

<style scoped>

</style>

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