Vuex Persisted State 开源项目指南
目录结构及介绍
当你克隆或下载 vuex-persistedstate
项目后,你会看到如下的主要目录结构:
.
├── README.md # 项目说明文档
├── LICENSE # 许可证文件
├── package.json # 包管理配置文件
├── index.js # 源代码入口文件
└── test # 测试目录
├── browser.js # 浏览器环境测试文件
└── node.js # Node.js环境测试文件
README.md
此文件提供了关于项目的简要描述,包括使用方法,API细节,贡献指南等。
LICENSE
项目使用的许可证类型通常在这里找到。vuex-persistedstate
使用的是 MIT License。
package.json
用于定义项目依赖和脚本命令。例如:
{
...
"dependencies": {
"vuex": "^3.0.0"
},
"devDependencies": {
"mocha": "^4.0.0",
"standard": "^10.0.3",
"tape": "^4.7.0",
"vue": "^2.5.2"
},
"scripts": {
"test": "npm run lint && mocha test/**/*js",
"lint": "standard index.js test/*.js"
}
}
index.js
这是项目的主模块,包含了 createPersistedState
函数,它被设计用来作为 Vuex 的插件使用。
test/browser.js 和 test/node.js
这些文件用于确保 vuex-persistedstate
在不同的环境下正常工作。
项目的启动文件介绍
尽管没有专门的“启动”文件,但 index.js
是项目的实际入口点。在这个文件中,我们看到了 createPersistedState
函数的定义,这是整个库的核心部分。下面是简化版的函数定义示例:
// index.js
export default function createPersistedState (options) {
return ({ store }) => {
let stateCache = options.states ? {} : null;
if (options.keys && !options.states) throw new Error(`You can only use keys with the states option`);
if (!options.storage) options.storage = localStorage;
function load () {
try {
let savedState = options.storage.getItem(options.key || 'vuex');
if (savedState === null || savedState === undefined) return
savedState = JSON.parse(savedState);
for (let key in savedState)
store.replaceState(Object.assign(store.state, { [key]: savedState[key] }))
} catch (e) {}
}
function commit (type, payload, options) {
// Commit mutations and save state to local storage
}
load()
store.subscribe(commit)
// Restore state on page reload for hot module replacement
if (module.hot) {
module.hot.accept(() => {
store.replaceState(stateCache);
load();
});
}
};
};
这里定义的 createPersistedState
函数接收一个选项对象参数,然后返回一个 Vuex 插件,该插件在每次应用启动时从本地存储加载 Vuex 状态,并在状态改变时将其保存回本地存储。
项目的配置文件介绍
虽然 vuex-persistedstate
库本身不包含任何特定的配置文件,但它可以通过在其导入处传递配置对象来定制其行为。配置的主要关注点有:
states
:可以显式地选择应该持久化的状态名称数组。keys
:与states
类似,但允许选择嵌套状态的路径。storage
:覆盖默认的存储机制,默认情况下使用localStorage
。key
:存储项的键名,默认为'vuex'
。paths
:自定义状态路径解析策略。
例如,在你的 store.js
文件中配置 vuex-persistedstate
的代码可能看起来像这样:
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
token: '',
user: {},
settings: {}
},
mutations: {},
plugins: [
createPersistedState({ paths: ['token', 'user'] })
]
});
export default store;
此处展示了如何只选择性地使 'token'
和 'user'
状态持久化。此外,还可以通过 paths
选项或者更复杂的 states
和 keys
选项进行进一步的定制。