vuex管理全局变量、全局方法

曾几何时，我采用vue2框架写了关于世界杯竞猜主题的项目，里面有多个视图依赖于同一状态，然后来自不同视图的行为需要变更同一状态。
想想以前稍简单的多层组件嵌套采用父子传值的方式搞得我已经够难受（现在回忆起来气都不顺），现在如果还采用这种方式，可能连我都看不懂自己写的代码了，连自己都不知道怎么维护了！很庆幸，有一种状态管理架构叫vuex,很庆幸，他能很好的解决我遇到的问题......

vuex是一个专门为vue.js设计的集中式状态管理架构，用来管理公用属性，真的是好用太多了！！！

那就开始吧!

1、利用npm包管理工具，进行安装 vuex（前提是已经用Vue脚手架工具构建好项目，可参考https://www.jianshu.com/p/023b7492833d）

npm install vuex --save

2、新建一个store.js用于存放公共的属性

在store.js中引用Vuex

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

3、在main.js中引用新建的store.js,并在实例化 Vue对象时加入 store 对象

import store from './store'

new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
})

配置好这些关联文件之后，我们可以开始状态管理了~
下面是store.js状态管理示例：

const store = new Vuex.Store({
  state: { //唯一数据源，我理解为声明全局变量
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ],
    count:1
  },
  getters: {//针对state数据的过滤，
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: { //逻辑处理，但Mutation 必须是同步函数
      increment (state) {
        // 变更状态
        state.count++
      }
  }，
  actions: {//Action 类似于 mutation,Action 提交的是 mutation，而不是直接变更状态;Action 可以包含任意异步操作.
    setIncrement (context) {
      context.commit('increment')
    }
  }
})

状态管理逻辑写好后，就可以在组件页面调用， 假设我有个组件的名字叫matchVs.vue,我要调用公用的方法啦~
首先引用
import { mapState } from "vuex";
然后调用方法
computed: { ...mapState({ // 获取count的值，此时获取到count的值为2 count: state => state.count }) }, created() { //页面创建的时候，就调用该方法 this.$store.dispatch("setIncrement "); }
基本就是这么用了，如果你的store比较大，vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

更多更详细的，那就去看看文档吧https://vuex.vuejs.org/zh/