记录下vue相关使用和vuex

这里记录一下vuex的使用和vuex的简易实现

首先创建对应的store目录和对应的入口index.js

import Vue from 'vue'
import Vuex from 'vuex'
import products from './modules/products'
import cart from './modules/cart'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    count: 0,
    msg: 'Hello Vuex'
  },
  getters: {
    reverseMsg (state) {
      return state.msg.split('').reverse().join('')
    }
  },
  mutations: {
    increate (state, payload) {
      state.count += payload
    }
  },
  actions: {
    increateAsync (context, payload) {
      setTimeout(() => {
        context.commit('increate', payload)
      }, 2000)
    }
  },
  modules: {
    products,
    cart
  }
})

首先注册vuex的插件
开发阶段开启strict严格模式
配置初始的state
配置对应的getters
配置对应的mutations 无副作用的函数更新
配置actions在此做异步处理
最后配置模块
模块中配置：

const state = {}
const getters = {}
const mutations = {}
const actions = {}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

配置模块命名空间namespaced:true 导入store时的模块名

使用的时候

可以 通过一些对应的vuex提供的方法把store中的对应属性和方法拿到组件中

vue父子通信



或者就是自定义 组件的 v-model

非父子组件：Event Bus
我们可以使用一个非常简单的 Event Bus 来解决这个问题：

还有一种需要注意的，外部props转换为内部state

  name: 'ArticleMeta',
  props: {
    article: {
      type: Object,
      required: true
    },
    user: {
      type: Object
    }
  },
  data () {
    return {
      currentArticle: this.article, isDelete: false
    }
  },

myPlugin是注册给vuex的插件.
看这张图我们可以知道我们通过vue.use(vuex)这样来注册插件的。

然后我们就大概来实现一下它的简易版。
创建vuex的类，以及install方法

let _Vue = null
class Store {
  constructor (options) {
    const {
      state = {},
      getters = {},
      mutations = {},
      actions = {}
    } = options
    this.state = _Vue.observable(state) //调用vue内部observe数据劫持
    this.getters = Object.create(null) //创建一个没有原型的对象
    Object.keys(getters).forEach(key => { //对get内部方法做下劫持
      Object.defineProperty(this.getters, key, {
        get: () => getters[key](state)
      })
    })
    this._mutations = mutations  //储存_mutations和actions
    this._actions = actions
  }

  commit (type, payload) { //提交commit传入state 
    this._mutations[type](this.state, payload)
  }

  dispatch (type, payload) { //dispatch异步 操作传入this
    this._actions[type](this, payload)
  }
}

function install (Vue) {
  _Vue = Vue
  _Vue.mixin({
    beforeCreate () {
      //混入生命周期，实例化好了vue,store存在 注册到原型上
      if (this.$options.store) {
        _Vue.prototype.$store = this.$options.store
      }
    }
  })
}

export default {
  Store,
  install
}

这一篇很简单