Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，当我们的应用遇到多个组件共享状态时，可以引入vuex。

vuex核心store

• 每一个 Vuex 应用的核心就是 store（仓库）。
• “store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)；
• 核心组成：
  state
getters
mutations
actions
modules

vuex与全局对象的差异:

• vuex 的状态存储是响应式的：store中状态改变，相应引用该状态的视图也会随之变化
• 改变某一状态需提交 (commit) mutation

vuecli项目中vuex的简单使用

• store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    currentMap: null
  },
  mutations: {
    SET_CURRENTMAP: (state, currentMap) => {
      state.currentMap = currentMap
    }
  },
  /* actions: {
    SetCurrentMap({ commit }, currentMap) {
      commit('SET_CURRENTMAP', currentMap)
    }
  }, */
  getters: {
    map: state => state.currentMap
  },
  modules: {
  }
})

• vue组件中改变其取值
  this.$store.commit("SET_CURRENTMAP", this.currentMap);
• 利用mapGetters，获取到改变的值

import { mapGetters } from "vuex";

computed: {
    ...mapGetters(["map"])
  },
watch: {
    map(val) {
      if (val) {
        Draw.init(val);
      }
    }
  }

• 利用watch监听，当值改变时，进行其他操作