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


继续学习请点击

推荐阅读更多精彩内容