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

前言：

Vuex个人见解：

1、state ：所有组件共享、共用的数据。理解为不是一个全局变量，不能直接访问以及操作它。
2、mutations ： 如何操作 state 呢？需要有一个能操作state 的方法【mutations】，来操作它。mutations 只是定义了操作 state的方法，无法驱动。
3、actions ： 使用actions 来驱动 mutations 中的操作 state的方法函数。使用，commit 来告诉 mutations ，执行操作，改变state的值。

src根目录

新建store.js

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 })

main.js引入

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')

新建一个 vue组件

<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>

效果图：