vuex understanding and summary

Vue before development projects are also often vuex, but only the flexible use of it, over time might forget. Thinking about summary.
We look at the definition of vuex:
First, what Vuex that?

Vuex is a specially developed for Vue.js application state management. It uses the status of all components centralized storage management application, and a corresponding state rules to ensure a predictable manner changed.

Second, why should we use vuex it?

There are mainly two reasons 1. The method of parameter passing for nested components will be very tedious, and passed between the brothers could do nothing for the state assembly 2. We often takes his son to change the components referenced directly or through events and synchronization multiple copies state. More of these models are very vulnerable, often results in code that can not be maintained.

So, why do not we share the status of the component extracted to a global singleton manage it? In this mode, we constitute a huge component tree "views", regardless of which position in the tree, any component can obtain the status or trigger behavior! By the definition of various concepts and isolation management and maintain the independence of view and by forcing state rules, our code will become more structured and easy to maintain.

Third, the installation vuex

npm install --save vuex

Four, vuex related configurations
are generally below the src store a new folder, as shown:

The index.js store folder configured as follows

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

export default new Vuex.Store({
  modules: {
    //vuex为我们提供了module这样一个模块的概念。
    // 我们可以利用它来根据我们个个组件或者页面所需要的数据一一分割成不同的模块
    user
  },
  state: {
    // state 类似 data
    //这里面写入数据
    isMenu: {
      show:false,
      title:"离校统计"
    }
  },
  getters:{ 
    // getters 类似 computed 
    // 在这里面写个方法
  },
  mutations: {
    // mutations 类似methods  (mutations的英文意思是突变、变化)
    // 写方法对数据做出更改(同步操作)
    setMenuShow(state, val) {
      state.isMenu = val
    }
  },
  actions: {
    // actions 类似methods（action的英文意思是行动；活动）
    // 写方法对数据做出更改(异步操作)
  }
})

Introducing index.js store file folder under the file index.js

code is as follows:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/index'
import Mint from 'mint-ui';
import '../../style-app/flexible';
import 'mint-ui/lib/style.min.css';
import '../../style-app/index.css'
Vue.use(Mint);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

if (module.hot) {
  module.hot.accept();
}