先說一個常用的vue輔助工具vue-devtools安裝教程。
一读存、什么是Vuex微姊？為啥要使用它呢？
首先我們假設一個場景：當我們需要一個“常量”，在各個組件之間傳播（或者是.vue文件中傳播）沼本，父組件噩峦，子組件，孫組件等5層到6層抽兆。當用戶打開幾個窗口進行數(shù)據操作的時候识补，數(shù)據就可能被污染（大中型項目中常見）。這樣我們就需要一個控制中心（我叫它“核心前端數(shù)據庫”）的東西——這也vuex中的store（倉庫）辫红，它把所有公用的數(shù)據和方法凭涂，當有“人”要改的時候，就得來我這里修改贴妻。
二切油、簡單的demo
1. 新建store.js用來管理狀態(tài)（也就是vuex）。
/* 倉庫文件 */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = { //一般通過外部文件引入的名惩，東西很多的澎胡。
//定義數(shù)據 --- 類似data
num: 12 //生成了一個靜態(tài)的常量
}
const mutations = {
//定義方法 --- 類似methods
add(state){//state 是把上面的數(shù)據引入進來的
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. 在相關組件中使用（此處是App.vue）
<template>
<div id="app">
{{ $store.state.num }} <!-- vue靜態(tài)的常量 --> <!-- $store是共有的意思 -->
<div class="">
<button type="button" name="buttonAdd" @click="$store.commit('add')">加一個</button><!-- vue2.0 的寫法 -->
<button type="button" name="buttonAdd" @click="$store.commit('minus')">減一個</button>
</div>
</div>
</template>
所有.vue文件操作數(shù)據的時候都用這種方法就不會講數(shù)據弄混了。
vue-devtools中的vuex對事件的監(jiān)測娩鹉，當我們進行操作的時候就會有記錄相關信息攻谁。
繼續(xù)學習請點擊
