先说一个常用的vue辅助工具vue-devtools安装教程。
一、什么是Vuex？为啥要使用它呢？
首先我们假设一个场景：当我们需要一个“常量”，在各个组件之间传播（或者是.vue文件中传播），父组件，子组件，孙组件等5层到6层。当用户打开几个窗口进行数据操作的时候，数据就可能被污染（大中型项目中常见）。这样我们就需要一个控制中心（我叫它“核心前端数据库”）的东西——这也vuex中的store（仓库），它把所有公用的数据和方法，当有“人”要改的时候，就得来我这里修改。
二、简单的demo
1. 新建store.js用来管理状态（也就是vuex）。
/* 仓库文件 */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = { //一般通过外部文件引入的，东西很多的。
//定义数据 --- 类似data
num: 12 //生成了一个静态的常量
}
const mutations = {
//定义方法 --- 类似methods
add(state){//state 是把上面的数据引入进来的
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静态的常量 --> <!-- $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文件操作数据的时候都用这种方法就不会讲数据弄混了。
vue-devtools中的vuex对事件的监测，当我们进行操作的时候就会有记录相关信息。
继续学习请点击
