Vue组件保存数据以备以后使用

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始数据'
    }
  },
  methods: {
    updateMessage() {
      this.message = '更新后的数据'
    }
  }
}
</script>

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: '初始数据'
  },
  mutations: {
    updateMessage(state, payload) {
      state.message = payload
    }
  },
  actions: {
    updateMessage({ commit }, payload) {
      commit('updateMessage', payload)
    }
  },
  getters: {
    getMessage(state) {
      return state.message
    }
  }
})

// 组件中使用
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新数据</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['updateMessage'])
  }
}
</script>

// 存储数据
localStorage.setItem('message', '数据')

// 获取数据
const message = localStorage.getItem('message')

// 父组件
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '数据'
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>