Vuex-全局状态管理【简单小案例】

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)

const state = {
  count: 1
}

const mutations = {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  }
}

const actions = {
  Actions_increment: ({ commit }) => {
    commit(‘increment‘)
  },
  Actions_decrement: ({ commit }) => {
    commit(‘decrement‘)
  }
}

//模块到处，才能被引入使用

export default new Vuex.Store({ state, mutations, actions })

import Vue from ‘vue‘
import App from ‘./App.vue‘
import store from ‘./store‘
Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount(‘#app‘)

<template>
  <div id="vuex">
    <div class="container">
      <h1>Vuex实例</h1>
      <hr />
      <div class="input-group">
        <span class="input-group-btn">
          <button type="button" class="btn btn-success" @click="Actions_increment">增加</button>
        </span>
        <input type="text" class="form-control"  v-model="count" />
        <span class="input-group-btn">
          <button type="button" class="btn btn-danger" @click="Actions_decrement">减少</button>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex"
export default {
  methods: {
   ...mapActions(["Actions_increment", "Actions_decrement"])
  },
  computed: {
    ...mapState([
      ‘count‘
    ])
  }
  
}
</script>

<style>

</style>