vuex的理解和总结

之前开发vue的项目也经常用vuex，但是也只是灵活运用而已，过段时间可能就忘了。就想着总结一下。
我们先看一下vuex的定义：
一、Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、那么我们为什么要用vuex呢？

主要是有两个原因 1.传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力 2.我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！ 通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

三、安装vuex

npm install --save vuex

四、vuex的相关配置
一般都是在src下面新增一个store的文件夹，如图：

store文件夹下的index.js配置如下

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的英文意思是行动；活动）
    // 写方法对数据做出更改(异步操作)
  }
})

在index.js文件中引入store文件夹下的index.js

代码如下：

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();
}