【亲测免费】 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 库本身不包含任何特定的配置文件，但它可以通过在其导入处传递配置对象来定制其行为。配置的主要关注点有：

1. states：可以显式地选择应该持久化的状态名称数组。
2. keys：与 states 类似，但允许选择嵌套状态的路径。
3. storage：覆盖默认的存储机制，默认情况下使用 localStorage。
4. key：存储项的键名，默认为 'vuex'。
5. 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 选项进行进一步的定制。