VUEX模块化

vuex模块化官方文档

项目github地址

在vuex的官网上，关于模块化和热重载的文档都是蛮详细的，这边也就不一一的搬砖，没啥意义。这边着重是介绍下项目中是如何使用以及模块之间的调用和模块如何引入。

• 创建如下的文件结构。这个应该算是一个中规中矩的vuex推荐的文件目录。

文件结构

• 除了module，其他的文件，可以理解为是主模块，或者是默认模块。通俗的将就是一些全局用到的状态或者信息，比如全局loading状态控制，全局的网页TDK（title、description、keywords）。或者用户的一些基本信息。

• module可以根据实际项目中，进行模块化，比如可以每个页面有自己单独的模块。也可以根据类型划分模块，比如产品，产品详情等一个模块，新闻一个模块，用户信息一个模块。因项目的不同而划分模块。
  

  模块

• 某个模块。写法也就是跟主模块一样。state/getters/actions/mutations 四大vuex的主要模块。这边需要特别注意的是namespaced。如果想要让该模块具有复用性，让其他模块也能调用，需要将namespaced设置为true。

const state = {
    JokeList: []
}

const getters = {
    JokeList(state) {
        return state.JokeList;
    }
}

const actions = {
    async getJoke({ commit }) {
        const result = await modal.fetchJoke();
        if (result.code == 200 && result.result.length) {
            commit('setJoke', result.result);
        }
    },
}
const mutations = {
    setJoke(state, params) {
        state.JokeList = params;
    }
}

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

• 导出store提供给vue的构造体使用。

import Vue from 'vue';
import Vuex from 'vuex';
import getters from './getters';
import actions from './actions';
import mutations from './mutations';
import defaultState from './state';
import home from './module/home';
import detail from './module/detail';
Vue.use(Vuex);
const isDev = process.env.NODE_ENV === 'development'
const store = new Vuex.Store({
        strict: isDev,
        state: defaultState,
        mutations,
        getters,
        actions,
        modules: {
            home,
            detail
        }
    })

• 如何在页面中引入模块。与以往不同的是，我们在mapActions和mapState都需要对想要使用的模块进行声明。如果是主模块的内容，则就不需要加模块。

<script>

import { mapActions, mapState } from 'vuex';

export default {
    mounted () {
        this.getJoke();
    },
    methods: {
        ...mapActions({
            getJoke: 'home/getJoke',
            getMain: 'getMain',
        }),
    },
    computed: {
        ...mapState({
            JokeList: state => state.home.JokeList,
             mainState: state => state.mainState
        }),
    }
}
</script>

• 顺便提下，模块之间action方法如何相互调用。通过dispatch，可以实现模块内部方法之间的项目调用。dispatch主要是实现actions方法之间的调用。commit主要是实现actions调用mutations方法。

const actions = {
    test1({ commit, dispatch }, params) {
        console.log('i am test1', params);
        dispatch('test2', params);
    },
    test2({ commit }, param) {
        console.log('i am test2', param);
    }
}

• 模块如何调用主模块的方法。与普通的模块调用模块的方法其实都差不多，不管是用dispatch或者是用commit，只需要在结尾处加入{ root: true } 这个对象属性就能调用主组件的方法。

const actions = {
    getJokeDetail({ commit }, params) {

        //dispatch('setLoading', { root: true })
        commit(SET_LOADING, true, { root: true });
    },
}

• 模块之间的方法相互调用。比如home模块调用detail模块的方法。只需要加模块的名称。

const actions = {
    getJokeDetail({ commit }, params) {
        //dispatch('detail/setLoading')
        commit('detail/setLoading');
    },
}

总结

vuex的模块化能让我们按照不同的业务，解耦出vuex的不同模块出来。模块之间的相互调用只需要将namespaced设置为true，就可以实现模块名称+方法名称的方法之间调用。使得我们更方便的管理不同模块之间的状态。