入口文件代码:
import Vue from 'vue'
import store from './stone.js'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')
store 文件代码:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state:{
count: 0
},
mutations:{
increment(state){
state.count++;
}
},
actions:{
increment(state){
state.count++;
}
}
})
组件代码:
<template>
<div id="app">
当前状态:{{ count }}
<button @click="increment">count++</button>
</div>
</template>
<script>
export default {
methods:{
increment:function(){
this.$store.commit('increment');
}
},
computed: {
count () {
return this.$store.state.count
}
}
}
</script>