vuex学习一计数器

入口文件代码：

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>