Vuex之命名空间namespace用法

/**
* 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"
})
讨论数量: 0

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!