Vuex从入门到入门

先说一个常用的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对事件的监测，当我们进行操作的时候就会有记录相关信息。

继续学习请点击