Хобрук: Ваш путь к мастерству в программировании

Доступ к данным из localstorage с другого маршрута с помощью vuex

Я получаю данные из маршрута панели конфигурации, устанавливая его на локальное хранилище с помощью vuex, storeJS:

     const state = {
      message: [],
      // console.log(message);
      sec: 0,
      // other state
    };
    const getters = {
      message: (state) => {
        // console.log(this.state.message);
    
        return state.message;
      },
    
      sec: (state) => {
        return state.sec;
      },
      // other getters
    };
    
    const actions = {
      setMessage: ({ commit, state }, inputs) => {
        commit(
          'SET_MESSAGE',
          inputs.map((input) => input.message)
        );
    
        return state.message;
      },

  setSec: ({ commit, state }, newSecVal) => {
    commit('SET_TIMEOUT', newSecVal);
    return state.sec;
  },
  // other actions
};
const mutations = {
  SET_MESSAGE: (state, newValue) => {
    state.message = newValue;
    localStorage.setItem('message', JSON.stringify(newValue));  ----->this
  },
  SET_TIMEOUT: (state, newSecVal) => {
    state.sec = newSecVal;
    localStorage.setItem('sec', JSON.stringify(newSecVal));  --->this
  },
  // other mutations
};

export default {
  state,
  getters,
  actions,
  mutations,
};

Теперь у меня есть домашний маршрут, на котором я хочу отобразить это, как я могу получить к нему доступ?

Я получаю данные (не локальное хранилище, а данные обычного состояния) с помощью Mapgetters, и я использую их так:

computed: {
   

    ...mapGetters({
      message: "message",
      sec: "sec"
    }),

как я могу сказать ему, что если нет ничего (при перезагрузке страницы), чтобы автоматически получить данные из localstorage. Это моя цель

mounted() {
    this.$store.dispatch("SET_MESSAGE");
    this.$store.dispatch("SET_SEC");
 
    
  },

  • В мутации это можно указать как state.message || localStorage.getItem ('сообщение') 07.07.2020
  • где именно вы имеете в виду? 07.07.2020

Ответы:


1

Я предлагаю вам использовать этот пакет для синхронизации вашего состояния и локального хранилища vuex-persistedstate.

В качестве альтернативы вы можете установить свое состояние следующим образом.

const state = {
  message: localStorage.getItem('message') || [],
  // console.log(message);
  sec: localStorage.getItem('sec') || '',
  // other state
};
07.07.2020
Новые материалы

Прогресс в технологии Трансформеров часть 3
Многомасштабный управляющий сигнальный преобразователь для бесфазного синтеза движения (arXiv) Автор: Линтао Ван , Кун Ху , Лей Бай , Юй Дин , Ваньли Оуян , Чжиюн Ван . Аннотация:..

Представляем поддержку компонентов Vue.js. Мгновенный HMR и многое другое.
Хотя у FuseBox уже был плагин Vue, он был базовым и не имел многих функций, которые делали работу с Vue.js такой приятной. Однако с этим выпуском мы рады сообщить, что в FuseBox..

Приключения в Javascript, часть 1
Я продолжаю думать о том, чтобы писать больше, но чем больше я думаю об этом, тем меньше я это делаю. Итак, сегодня я перестал думать и начал писать. Отсюда можно только спускаться… В..

Понимание дженериков в TypeScript: подробное руководство
Введение TypeScript, строго типизированный надмножество JavaScript, хорошо известен своей способностью улучшать масштабируемость, удобочитаемость и ремонтопригодность приложений. Одной из..

Учебные заметки JavaScript Object Oriented Labs
Вот моя седьмая неделя обучения программированию. После ruby ​​и его фреймворка rails я начал изучать самый популярный язык интерфейса — javascript. В отличие от ruby, javascript — это более..

Разбор строк запроса в vue.js
Иногда вам нужно получить данные из строк запроса, в этой статье показано, как это сделать. В жизни каждого дизайнера/разработчика наступает момент, когда им необходимо беспрепятственно..

Предсказание моей следующей любимой книги 📚 Благодаря данным Goodreads и машинному обучению 👨‍💻
«Если вы не любите читать, значит, вы не нашли нужную книгу». - J.K. Роулинг Эта статья сильно отличается от тех, к которым вы, возможно, привыкли . Мне очень понравилось поработать над..