在 Vuetify 中使用浏览器同步

在 Vuetify 中，可以使用浏览器同步来保持多个浏览器选项卡之间的数据同步。这在某些应用程序中非常有用，比如协同编辑或即时应用程序。

安装

要使用浏览器同步，请使用以下命令安装 vuex-persistedstate：

npm install vuex-persistedstate

配置

要配置浏览器同步，请在 store/index.js 中添加以下代码：

import createPersistedState from 'vuex-persistedstate'

export default createStore({
  // ...
  plugins: [
    createPersistedState()
  ]
})

现在，您的应用程序将在 Vuex 存储中存储状态，并在每个新选项卡中从浏览器中加载状态。

您还可以通过传递 options 对象来配置 createPersistedState。

以下是一些常用的选项：

• key - 存储状态的键。默认为 vuex。
• paths - 要持久化的状态路径。默认为持久化整个状态树。
• storage - 要使用的持久化存储器。默认为 localStorage。您可以更改为 sessionStorage 或其他合适的存储器。
• reducer - 在将状态存储到本地存储之前调用的函数。默认为没有操作。您可以使用此选项来过滤要存储的状态。

import createPersistedState from 'vuex-persistedstate'

const reducer = state => ({
  // 过滤要存储的状态
})

export default createStore({
  // ...
  plugins: [
    createPersistedState({
      key: 'my-app',
      paths: ['auth.user'],
      storage: sessionStorage,
      reducer: reducer
    })
  ]
})

浏览器同步和单元测试

默认情况下，createPersistedState 将使用 localStorage 存储状态。这将导致您的单元测试在不同的浏览器环境中失败，因为每个浏览器环境都具有不同的 localStorage。

为了解决这个问题，您可以使用一个模拟的 localStorage 实现，如 mock-local-storage 来模拟浏览器环境。

npm install mock-local-storage --save-dev

// sample.spec.js

import 'mock-local-storage'

// 现在 localStorage 将在测试中可用

结束语

浏览器同步是一个非常有用的工具，可以让您的应用程序保持同步，即使在多个浏览器选项卡中也是如此。在 Vuetify 中，通过使用 vuex-persistedstate 插件，您可以轻松实现浏览器同步。