Отключите vuex-persist при использовании IE

Question

В моем магазине vuex я использую плагин vuex-persist, который прекрасно работает во всех современных браузерах. Это не работает в IE11, и я хотел бы иметь возможность отключить плагин, если пользователь просматривает с IE. Это возможно?

Мой магазин vuex загружен в main.js через ... import store from '@/store/index.js';

А мой магазинный код ...

Vuex - index.js

import Vue from 'vue';
import Vuex from 'vuex';
import VuexPersist from 'vuex-persist';

import locales from './modules/locales.js';
import pdf from './modules/pdf-preview.js';
import site from './modules/site.js';
import user from './modules/user.js';

Vue.use(Vuex);

const vuexPersist = new VuexPersist({
  key: 'vuex',
  storage: window.localStorage,
  modules: ['pdf','site','user'],
});

const store = new Vuex.Store({
  state: {
  },
  modules: {
    locales,
    pdf,
    site,
    user,
  },
  plugins: [vuexPersist.plugin],
});

export default store;

Answer 1

Я предполагаю, что реальная проблема, с которой вы сталкиваетесь, заключается в том, что window.localStorage не существует или не позволяет вам что-либо хранить, даже несмотря на то, что Internet Explorer поддерживал это начиная с IE8. Лучший способ - просто обнаружить функцию, которая не поддерживается (в данном случае localStorage), и просто не загружать плагин:

const plugins = [];

let canStoreAnything = !!window.localStorage;
if (canStoreAnything) {
  try {
    window.localStorage.setItem("__test_localstorage_test__", 1);
    window.localStorage.removeItem("__test_localstorage_test__");
  } catch (e) {
    // Probably Safari in incognito mode
    canStoreAnything = false;
  }
}

if (canStoreAnything) {
  const vuexPersist = new VuexPersist({
    key: "vuex",
    storage: window.localStorage,
    modules: ["any"]
  });

  plugins.push(vuexPersist.plugin);
}

const store = new Vuex.Store({
  modules: {
    any
  },
  plugins
});

Если есть другая причина для обнаружения Internet Explorer, просто доверьтесь User Agent. Это может быть подделано, но должно работать нормально для вашего случая использования. Замените canStoreAnything на isIE, который можно вычислить с помощью следующей строки ^{[ source ]}

const isIE = window.navigator.userAgent.indexOf('MSIE') >= 0 || window.navigator.userAgent.indexOf('Trident') >= 0;