先說(shuō)一個(gè)常用的vue輔助工具vue-devtools安裝教程。

一、什么是Vuex？為啥要使用它呢？

首先我們假設(shè)一個(gè)場(chǎng)景：當(dāng)我們需要一個(gè)“常量”，在各個(gè)組件之間傳播（或者是.vue文件中傳播），父組件，子組件，孫組件等5層到6層。當(dāng)用戶打開(kāi)幾個(gè)窗口進(jìn)行數(shù)據(jù)操作的時(shí)候，數(shù)據(jù)就可能被污染（大中型項(xiàng)目中常見(jiàn)）。這樣我們就需要一個(gè)控制中心（我叫它“核心前端數(shù)據(jù)庫(kù)”）的東西——這也vuex中的store（倉(cāng)庫(kù)），它把所有公用的數(shù)據(jù)和方法，當(dāng)有“人”要改的時(shí)候，就得來(lái)我這里修改。

二、簡(jiǎn)單的demo

1. 新建store.js用來(lái)管理狀態(tài)（也就是vuex）。

/* 倉(cāng)庫(kù)文件 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const state = { //一般通過(guò)外部文件引入的，東西很多的。
  //定義數(shù)據(jù) --- 類(lèi)似data
  num: 12  //生成了一個(gè)靜態(tài)的常量
}
const mutations = {
  //定義方法 --- 類(lèi)似methods
  add(state){//state 是把上面的數(shù)據(jù)引入進(jìn)來(lái)的
    state.num++;
  },
   minus(state){
     state.num--;
   }
}
export default new Vuex.Store({
  state,
  mutations
});

2. 在入口文件main.js中引入

import Vue from 'vue'
import store from './store/store.js' //全局中引入vuex
import App from './App.vue'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

3. 在相關(guān)組件中使用（此處是App.vue）

<template>
  <div id="app">
    {{ $store.state.num }}  <!-- vue靜態(tài)的常量   -->  <!-- $store是共有的意思 -->
    <div class="">
      <button type="button" name="buttonAdd" @click="$store.commit('add')">加一個(gè)</button><!-- vue2.0  的寫(xiě)法 -->
      <button type="button" name="buttonAdd" @click="$store.commit('minus')">減一個(gè)</button>
    </div>
  </div>
</template>

所有.vue文件操作數(shù)據(jù)的時(shí)候都用這種方法就不會(huì)講數(shù)據(jù)弄混了。
vue-devtools中的vuex對(duì)事件的監(jiān)測(cè)，當(dāng)我們進(jìn)行操作的時(shí)候就會(huì)有記錄相關(guān)信息。