基于路由在组件中显示Vuex存储中的数据

// dataModule.js

const state = {
  data: null
}

export default {
  state
}

// dataModule.js

const getters = {
  getData: state => state.data
}

export default {
  state,
  getters
}

// dataModule.js

const mutations = {
  setData: (state, payload) => {
    state.data = payload
  }
}

export default {
  state,
  getters,
  mutations
}

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getData'])
  }
}

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['setData'])
  }
}

<template>
  <div>
    <p>{{ getData }}</p>
    <button @click="setData('New Data')">Update Data</button>
  </div>
</template>