Vuex入门

Vuex入门

一、什么是Vuex？什么情况要使用它？

      当我们需要一个“常量”，在各个组件之间传播（或者是.vue文件中传播），父组件，子组件，孙组件等5层到6层。当用户打开几个窗口进行数据操作的时候，数据就可能被污染（大中型项目中常见）。这样我们就需要一个控制中心的东西——这也vuex中的store（仓库），它把所有公用的数据和方法存起来，当需要修改的时候，就到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对事件的监测，当我们进行操作的时候就会有记录相关信息。