Vuex源码分析二 ———— 结合实例分析Store

2019-01-11

上一篇详细分析了Store的源码以及其实例化的具体过程，这一篇结合具体例子来分析，进一步了解Vuex的具体过程

Vuex

先写一个整体的Vuex，下面的Vue组件都会用到

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

/*
    经过源码分析可知，实例化Store会对下面传入的属性
    进行处理，将state、getters挂载到组件上，而actions
    和mutations内定义的方法会存入对应的数组中，当调用
    dispatch时会去actions数组中找到对应的处理函数，
    而commit会去mutations中找到对应的处理函数
*/
const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

export default store

state.js

/*
    这里state也可以定义为function
    源码中可以知道，会判断是否为函数，
    如果为函数会默认执行
*/
const state = {
    num: 1
}

or

const state = () => ({num: 1})

export default state

getters.js

/*
    根据源码可以知道，getters中的每个getter都可以接收四个参数
    因为没定义命名空间，所以state和rootState一样，而getters
    和rootGetters一样
*/
const getters = {
    num: (state, getters, rootState, rootGetters) => {
        return state.num
    }
}

export default getters

actions.js

/*
    根据源码可知，每个action都会接收到一个有六个属性的对象参数
    可以分别进行操作，所以action可以commit一个或多个mutation
    也可以dispatch其它action，当然也可以处理state、getters
    但是只能在mutation中进行更改
    这里的payload则是传入到action中的数据
*/
const actions = {
    increment: ({
        dispatch, 
        commit, 
        getters, 
        state, 
        rootGetters, 
        rootState}, payload) => {
        commit('INCREMENT')
    }
}

export default actions

mutations.js

/*
    源码分析后可知，每个mutation都会接收两个参数
    即state和要传入的数据
*/
const mutations = {
    ['INCREMENT']: (state, payload) => {
        state.num ++
    }
}

export default mutations

Vue组件1

根据分析，实例化Store会将state、getters挂载到组件实例上，所以下面this.$store.state.num会调用Store的get方法访问到state，而this.$store.getters.num会直接拿到对应的getter

<template>
    <div>
        <div>{{ $store.state.num }}</div>
        <div>{{ $store.getters.num }}</div>
    </div>
</template>

<script>
    export default {
        mounted(){
            console.log(this.$store.state.num)
            console.log(this.$store.getters.num)
        }
    }
</script>

Vue组件2

/*
    这里因为是同步操作，可以直接commit mutation
    要更改state，只能调用mutation中的方法
*/
<template>
    <div>
        <div>{{ $store.state.num }}</div>
        <button @click="increment">+</button>
    </div>
</template>

<script>
    export default {
        methods: {
            increment(){
                this.$store.commit('INCREMENT')
            }
        }
    }
</script>

Vue组件3

/*
    也可以先派发action，然后由action去commit mutation
    当有异步操作的时候，只能通过action去commit mutation
*/
<template>
    <div>
        <div>{{ $store.state.num }}</div>
        <button @click="increment">+</button>
    </div>
</template>

<script>
    export default {
        methods: {
            increment(){
                this.$store.dispatch('increment')
            }
        }
    }
</script>

当需要传递参数的时候，其写法是this.$store.dispatch('increment', 3)以及this.$store.commit('INCREMENT', 3)，这样就可以在action和mutation中拿到传来的数据了

总结

根据源码分析，又结合实际例子，可以很清晰的了解Vuex整个过程，以及每一步为什么要如此操作，其为什么会有这些参数。

之前分析过Redux，对比可以发现，Vue的action与Redux的action类似，而mutation则与reducer类似，所以副作用的操作都要放在action中，只有mutation、reducer是改变state的唯一途径。