31-Vuex

1.vuex是基于vue框架的一个状态管理库，它采用集中式的存储了所有组件的状态（数据、事件...）
2.应用场景：大、中型项目
3.安装

npm install vuex -S

二、vuex的使用
1.在App.vue的同级新建文件夹store
2.在store中新建index.js
在index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)

//存储的是数据，相当于之前的data
const state = {
    num: 5
}
//存储事件的，相当于之前的methods
const mutations = {
    add(state){
        state.num++
    },
    reduce(state){
        state.num--
    }
}
export default new Vuex.Store({   
    state,  //名字随意起，对应即可，抛出数据
    mutations  //抛出事件
})

在main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

...

new Vue({
  el: '#app',  //是index.html里的id名
  router,  //路由
  store,   //vuex
  components: { App },
  template: '<App/>'   
})

在其他组件中：

<div>{{$store.state.num}}</div>
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>
<!-- state对应store--const定义的名字 -->
<!-- num--对应数据的名字 -->
<!-- add也是对应store里边的方法名 -->