使用vuex从另一个路由访问本地存储中的数据

npm install vuex --save

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 在这里定义存储的数据
    data: ''
  },
  mutations: {
    // 在这里定义修改数据的方法
    setData(state, payload) {
      state.data = payload
    }
  },
  actions: {
    // 在这里定义触发mutations的方法
    fetchData({ commit }) {
      // 在这里获取本地存储的数据，并通过commit方法触发mutations中的setData方法
      const data = localStorage.getItem('data')
      commit('setData', data)
    }
  }
})

export default store

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['data'])
  },
  methods: {
    ...mapActions(['fetchData'])
  },
  created() {
    this.fetchData()
  }
}