VUE (Quasar)如何访问本地存储数据而无需刷新

// 从LocalStorage中读取数据
let data = localStorage.getItem('key');

// 将数据写入LocalStorage
localStorage.setItem('key', data);

npm install vuex --save

// store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    data: null
  },
  mutations: {
    setData(state, payload) {
      state.data = payload;
    }
  },
  actions: {
    fetchData({ commit }) {
      // 从本地存储中获取数据
      let data = localStorage.getItem('key');
      // 更新Vuex中的数据
      commit('setData', data);
    }
  }
});

export default store;

<template>
  <div>
    <p>{{ data }}</p>
    <button @click="fetchData">获取数据</button>
  </div>
</template>

<script>
export default {
  computed: {
    data() {
      return this.$store.state.data;
    }
  },
  methods: {
    fetchData() {
      this.$store.dispatch('fetchData');
    }
  }
};
</script>