Как включить LocalStorage в Nativescript Vue WebView?

Question

У меня есть WebView в моем приложении Nativscript Vue, но на Android встроенный веб-сайт не имеет доступа к localStorage в браузере. Этот вопрос объясняет, как это сделать для Angular.Проблема заключалась в том, что было неясно, откуда должен был быть получен экземпляр webview.Вопрос для полноты: как получить доступ к экземпляру WebView, который содержит свойство android, чтобы включить локальное хранилище на нем?

Answer 1

Вот так я и решил в конце.Мне нужно было получить доступ к WebView, переданному через обработчик событий в свойстве event.object.В компоненте нет события с именем onWebViewLoaded, поскольку это не Angular.Вместо этого нам нужно подключить событие loadFinished к элементу WebView.

<template>
  <Page>
    <WebView
      src="https://www.example.com/"
      @loaded="onLoaded"
    />
  </Page>
</template>

<script>
export default {
  methods: {
    //when the webview finishes loading
    onLoaded(event) {
      //get the webview
      const webView = event.object

      //if there is android
      if (webView.android) {
        //enable dom storage in the webview on android
        webView.android.getSettings().setDomStorageEnabled(true)
      }
    }
  }
}
</script>

Answer 2

Просто используйте Vuex в сочетании с этим плагином nativescript-localstorage .Я говорю, что он не проверен на Nativescript 6. Я могу сказать, что он работает, потому что я использую его сам.

Пример store.js

import Vue from 'vue';
import Vuex from 'vuex';
import localStorage from 'nativescript-localstorage';

const NSVuexPersistent = store => {
    let storageStr = localStorage.getItem('ns-vuex-persistent');
    if (storageStr) {
        store.replaceState(JSON.parse(storageStr))
    }
    store.subscribe((mutation, state) => {
        // Suscribe hook.
        localStorage.setItem('ns-vuex-persistent', JSON.stringify(state));
    })
};

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        nations: null
    },
    plugins: [NSVuexPersistent],
    mutations: {
        updateNations(state, nations) {
            state.nations= nations;
        }
    }
});

Как выглядит main.js (добавитьэто):

import store from './store';

new Vue({
  store,
  render: h => h('frame', [h(App)])
}).$start()