Vuex状态管理模式

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 100
  },
  mutations: {

  },
  actions: {

  },
  getters: {

  },
  modules: {

  }
})

export default store

main.js
引入store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

vue

<p>{{$store.state.count}}</p>
<button type="button" @click="$store.state.count++">+</button>
<button type="button" @click="$store.state.count--">-</button>