016-Vuex之命名空间namespace用法

 

本文转自：  https://www.learnku.net/blog/articles/36

 

/**
* store\index.js ****************************************************************************************
*/
import Vue from 'vue';
import Vuex from 'vuex';
import type from './mutation-type';
// 子模块
import cache from './cache/cache.js';

Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
    },
    getters: {
    },
    mutations: {
    },
    actions: {
    },
    /**
     * 各个模块的状态store管理
     */
    modules: {
        cache: cache
    }
});

export default store;


/**
* store\cache\cache.js ****************************************************************************************
* 子模块商店（为防止刷新浏览器状态消失，也同时存储到本地缓存）
*/

import storage from 'good-storage';
export default{
    namespaced: true,

    state: {
        routeUrl: null
    },
    getters: {
        routeUrl(state) {
            return state.routeUrl || storage.get('productList__routeUrl', null)
        }
    },
    mutations: {
        routeUrl(state, url) {
            state.routeUrl = url
            storage.set("productList__routeUrl", url)
        }
    }
}


// cache 为模块的key值
// 本地商店storage命名规则 以__分隔
this.$store.state.cache.routeUrl		// 拿取state中的值
this.$store.getters['cache/routeUrl']	// 执行getters中的方法
...mapGetters({
	routeUrl: "cache/routeUrl"
})


this.$store.commit('cache/routeUrl', url);	// 执行mutations中的方法
...mapMutations({							// 执行mutations中的方法
    routeUrl: "cache/routeUrl"
})