vuex mapstate_Vuex使用&响应式原理

「引言」

❝

美国女神一手拿着火炬，一手拿着书，这是告诉我们停电也要学习。

❞

什么是vuex

简单描述一下，Vuex 使用单一状态树，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

核心prop：

• 「state」
  • 单一Store
  • 响应式
• 「getters」
  • 由state派生出的状态
  • store的计算属性
• 「mutations」
  • 由commit触发
  • 必须是同步函数
• 「actions」
  • 由dispatch触发
  • 可能包含任意异步操作
  • 不直接变更状态，可以通过mutation变化

基本使用

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.store({
    state: {
        count: 0
    },
    getters: {
        doubleCount: state => state.count * 2
    },
    mutations: {
        addCount(state, payload = 1) {
            state.count += 1
        }
    },
    actions: {
        asyncAddCount({commit}) {
            setTimeout(() => {
                commit('addCount')
            }, 1500)
        }
    }
})

// app.vue


{{ count }} {{ doubleCount }} addCount asyncAddCount






进阶写法

❝

采用map 映射

❞

// app.vue js 部分

Vuex响应式原理

先来简易实现一个简单的vuex，后续会详细讲解实现原理，以及更加完整的源码实现。

这里先来抛个砖。

import {reactive} from 'reactive.js'
class Store {
    constructor(options = {}) {
        let { state, mutations, plugins } = options
        this._vm = reactive(state) // 在这里将数据变为响应式的，方便触发更新
        this._mutations = mutations

        this._subscribe = []
        plugins.forEach(plugin => plugin(this)) // vuex 插件机制
    }
    get state() {
        return this._vm
    }
    commit(type, payload) {
        const entry = this._mutations[type]
        if (!entry) {
            return
        }
        entry(this._vm, payload)

        this._subscribe.forEach(sub => sub({type, payload}, this._vm))
    }
    subscribe(fn) {
        if (!this._subscribe.includes(fn)) {
            this._subscribe.push(fn)
        }
    }
}

这里采用了ES6的类这个语法糖，首先在构造函数中我们将options拿到这个单一的vuex单一状态Store的实例，将state，mutations 解构赋值取出来，作上述的操作，可能大家会对这里面的一些新的语法不是很熟悉。下期还会更新一波很全面的vuex源码解析

在这里强调几个「注意事项」：

• ES6的「class」这个语法糖的掌握
• 其实理解了vuex 它的数据流向，代码什么的都很简单，掌握一些规则去实现就ok
• 这上面的代码有几个地方需要提一下
  • state中的数据是响应式的，(下一期同步更新vue响应式原理实现 reactive 部分)
  • vuex中的插件机制(plugins)，提供了我们对数据进行一些上报(mutations阶段)以及过滤
• actions 和 mutations 相类似

补充：

这篇文章对vuex 中的 「module」 、「插件机制」、「命名空间」 等未展开详细阐述。

写在最后

❝

做个内心善良的人，手留余香，点个再看，让更多的人看到，帮助更多的人成长！

❞