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