016-Vuex之命名空间namespace用法
/*** store\index.js *****************************************************************************************/import Vue from 'vue';import Vuex from 'vuex';import type from './mutation-type';// ...
·
本文转自: 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"
})
更多推荐
已为社区贡献5条内容
所有评论(0)