手写一个简易的vuex

一、介绍

Vuex 是一个专为 Vue.js 应用程序开发的全局状态管理器。它的作用就是进行状态管理，解决复杂组件通信，数据共享。

参考链接：

• Vuex 中文文档
• Vuex github地址

下面将实现一个简单的Vuex 的功能，如不想看前置知识可以直接跳到最后的代码实现部分。

二、前置知识

1、Vuex的核心概念

• Store：每个应用仅有一个Store，是一个容器
  • 导入 Vuex
  • 注册 Vuex
  • 注入 $store 到 Vue 实例
• state：状态（响应式）
• getters：类似计算属性，用于派生其他值（内部对计算结果进行缓存，只有状态发生改变时才重新计算）
• mutations：只能同步，用于修改State，所有的状态更改必须通过Mutations
• actions：支持异步，提交多个Mutation
• modules：模块，每个都有自己的state、getters、mutations、actions甚至是子模块modules

2、Vuex的基本使用

// ./store/index.js
// 1.导入
import Vue from 'vue'
import Vuex from 'vuex'	
// 2. 注册插件
Vue.use(Vuex)
// 3.创建Vuex的Store对象，并导出
export default new Vuex.Store({
   
  state: {
   },
  getters: {
   },
  mutations: {
   },
  actions: {
   },
  modules: {
   }
})

// main.js
import store from './store'

// 创建Vue实例时注入store选项
new Vue({
   
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3、组件内的状态管理

对 Vue 框架来说，最核心的两个功能：数据驱动和组件化。

而每个组件都有自己的状态、视图和行为等组成部分。比如Vue的一个实例化代码：

new Vue({
   
    // state
    data () {