版本说明

"vue": "2.6.10",
"vuex": "3.1.0"

vuex简单使用：

// 入口文件简单实用
import Vue from './myvue'  // 初始化vue
import Vuex from './myvuex'   // 初始化vuex

Vue.use(Vuex) // 调用Vuex.install  给Vue对象混入了beforeCreate方法，这样new Vue实例的时候，执行到beforeCreate就会执行install里面定义的beforeCreate内容。
 
const store = new Vuex.Store({
  username:'limingyan'
})  // 创建store实例，里面处理数据
  
new Vue({  
    store
}) // 这里传入store，在beforeCreate钩子函数执行到时候，会执行混入的函数，然后把这个store实例添加到每个实例上。以后每个组件中都可以this.$store调用

// 模拟vue 文件
class Vue {
    constructor(obj) {
        this.options.$store = obj.store // 把传入的store加载到option上
    }
}
Vue.use = function (plugin) {
    plugin.install(this)  // use 执行到方法
}
export default Vue

// 模拟vuex 文件结构
function install(Vue) { 
  // 通过混入，在beforeCreate事件中处理
  // 将new Vue的时候传的store，加载到每个实例上的$store属性中
}
class Store{
  constructor() {
    // 处理数据
  }
}
export function mapState(obj) {
  let result = {}
  // 循环处理内容 result赋值
  return result
}
export default {
  install,
  Store
}
// 以上都是简化代码，只是串通vue和vuex的相互关联关系。

原理

vuex就是一个对象。加载到vue中就可以使用对象所拥有的功能。可以理解为一个插件。

vuex原理脑图