weex-vuex-storage
v1.1.24
Published
依据Vuex的module来存储数据到storage
Downloads
16
Readme
weex-vuex-storage
依据Vuex的module来存储数据到storage
install
npm install weex-vuex-storage -S
use
加载vuex插件
store.js
import {createStatePlugin} from 'weex-vuex-storage';
const plugins = [];
plugins.push(createStatePlugin({
key: 'rootKey', // 根节点的key
supportRegister: true, // 支持registerModule和unregisterModule时读取、删除本地数据
intercept: function(init) {
router.beforeEach((from, to, next) => {
init.then(next);
});
}
}));
export default new Vuex.Store({
...
plugins,
})
给action添加修饰器,调用action时存储当前module的state到storage,同时给需要存储的state属性添加到黑白名单,不能在同一个module中同时使用shouldWrite
和forbidWrite
module.js
import {setState, shouldWrite, forbidWrite} from 'weex-vuex-storage';
const module = {
...
state: {
@shouldWrite
someState: {}
},
actions: {
@setState,
someAction({commit}) {
}
}
}
也可以手动获取storage中的数据
view.vue
import {getState} from 'weex-vuex-storage';
export default {
methods: {
// module A storage data
getStateData() {
getState({
namespace: 'A/',
store: this.$store
}).then(state => {
console.log(state);
})
}
}
}
获取storage快照数据,导入快照数据至storage并同步更新module的state
view.vue
import {getModuleMap, loadStore} from 'weex-vuex-storage';
export default {
methods: {
getStorageSnapshot() {
// 获取快照数据
getModuleMap({
namespace: 'A/',
store: this.$store
}).then((snapshot) => {})
},
loadSnapshot() {
// 导入快照数据,并更新对应state
// 快照数据可由getModuleMap导出,key由createStatePlugin时填写
loadStore(this.$store, ['A'], {
`${key}/A/`: '{"a": 1}',
`${key}/A/B`: '{"b": "foo"}'
}, {
onlyState: false, // 是否需要覆盖到storage
removeList: [], // 需要移除的storage key,只在onlyState为true时生效
reserveList: [], // 需要保留的storage key,只在onlyState为true时生效
isReplace: true, // 是否全量替换module的state,需要module中的state为函数而非对象
}).then(() => {})
}
}
}