前言

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储

访问

1).this.$store.state.全局数据名称 如：this.$store.state.count

2).先按需导入mapState函数： import { mapState } from 'vuex'

然后数据映射为计算属性： computed:{ ...mapState(['全局数据名称']) }

mapState

映射 store 中的数值

示例

store.js

存储数据

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    department: '技术与数据中台',
    position: '软件开发工程师'
  }
})

LinHongcun.vue

本vue中，通过两种方式获取显示 store 中的数据

<template>
  <div>
    <div>{{$store.state.department}}</div>
    <div>{{position}}</div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapActions,
    mapGetters
  } from 'vuex'
  export default {
    computed: {
      ...mapState(['position'])
    }
  }
</script>

<style>
</style>

效果

可见，store 中的 department、position 数据都成功显示到页面了